Need to solve the problem of clicking active default display module

The first line of the default level is active, but when I click to the second column, the third column, and the fourth column, it will not display active

 

code:

<div class="h-tab">
<div class="h-tab_container">
  <div id="htab1" class="h-tab_content">
    <div class="v-tab" >
<ul class="v-tab_tab-head">
<li class="list-item active" rel="vtab1"><img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e1b9055071d86457008695/1675737349477/icon-advantage-1-1.png" height="80" wigth="40"><br><b>Reliable Cooperation</b><br>Long-term and reliable cooperative relationships with more than 800 manu-facturers around the world.</li>
<li class="list-item" rel="vtab2"><img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e1b90e0c65f62955042445/1675737358568/icon-advantage-1-2.png" height="80" wigth="40"><br><b>Hundreds of products support</b><br>Experience in hundreds of products covering all kinds of medical devices in the area of OR operating room series, ICU severe anesthesia series, maternal & infant perinatal product series, Labora-tory lifescience Instrument series, medi-cal consumables, Home healthcare products</li>
<li class="list-item" rel="vtab3"><img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e1b912f430752fcb06dd47/1675737362689/icon-advantage-1-3.png" height="80" wigth="40"><br><b>Full lifecycle services</b><br>One-stop services, from pre-market product R&D to post-marketing sup-port</li>
<li class="list-item"  rel="vtab4"><img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e1b91518c61205dd1a3650/1675737365681/icon-advantage-1-4.png" height="80" wigth="40"><br><b>Professional service team</b><br>Professional service teams of more than 100 full-time employees in the field with 10 + years of supervisor experience</li>
</ul>
<div class="v-tab_container" >
  <div id="vtab1" class="v-tab_content">
<img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e9a91d0b30aa00aaeb4e26/1676257565911/banner-advantage-1-1.jpg">
  </div>
  <!-- #tab1 -->
  <div id="vtab2" class="v-tab_content">
<img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e9a9217cec867b109dbf9a/1676257569638/banner-advantage-1-2.jpg">
  </div>
  <!-- #tab2 -->

  <div id="vtab3" class="v-tab_content">
<img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e9a924117211614254aaf5/1676257572354/banner-advantage-1-3.jpg">
  </div>
  <!-- #tab3 -->

  <div id="vtab4" class="v-tab_content">
<img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e9a927918ed21e3102548f/1676257575308/banner-advantage-1-4.jpg">
  </div>
  <!-- #tab4 --> 
</div>
</div>
</div>

  <!-- #tab1 -->

<div class="h-tab_container">
 <div id="htab2" class="h-tab_content">
       <div class="v-tab">
<ul class="v-tab_tab-head">
<li rel="vtab5" class="list-item active" ><img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e1c2fe071496620c9ed311/1675739902379/icon-advantage-2-1.png" height="80" wigth="40"><br>Provide samples when needs</li>
<li class="list-item"  rel="vtab6"><img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e1c301bb4b333fb0567ffe/1675739905080/icon-advantage-2-2.png" height="80" wigth="40"><br>Professional technical support team to offer technical sup-port.</li>
<li class="list-item"  rel="vtab7"><img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e1c30527113231ca845972/1675739909830/icon-advantage-2-3.png" height="80" wigth="40"><br>Provide product technical sheet, test report and other documents to sup-port registration</li>
<li class="list-item"  rel="vtab8"><img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e1c3081163283eadb0e854/1675739913023/icon-advantage-2-4.png" height="80" wigth="40"><br>Provide customized project solution and programs accord-ing to partner's requirements.</li>
</ul>
<div class="v-tab_container">
  <div id="vtab5" class="v-tab_content">
<img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e9ab84d7c91b252684b31f/1676258180719/banner-advantage-2-1.jpg">
  </div>
  <!-- #tab5 -->

  <div id="vtab6" class="v-tab_content">
<img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e9ab981ce7217fc18a8613/1676258200960/banner-advantage-2-2.jpg">
  </div>
  <!-- #tab6 -->

  <div id="vtab7" class="v-tab_content">
<img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e9ab877e37f934d78bea4d/1676258183287/banner-advantage-2-3.jpg">
  </div>
  <!-- #tab7 -->

  <div id="vtab8" class="v-tab_content">
<img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e9ab8d7215622ada2f6922/1676258189326/banner-advantage-2-4.jpg">
  </div>
  <!-- #tab8 --> 
</div>
</div>
</div>

  <!-- #tab2-->
<div class="h-tab_container">
 <div id="htab3" class="h-tab_content">
       <div class="v-tab">
<ul class="v-tab_tab-head">
  <li class="list-item active"  rel="vtab9" ><img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e1c4c55071d8645702442d/1675740357195/icon-advantage-3-1.png" height="80" wigth="40"><br><b>Regional sales support</b><br>Provide regional sales program advice and agent incentive policy</li>
  <li class="list-item" rel="vtab10"><img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e1c4ca7b17b31cf31c1398/1675740362507/icon-advantage-3-2.png" height="80" wigth="40"><br><b>Event and ac-tivities support</b><br>Encourage partners to attend market-ing events, provide resource and pro-motion support</li>
  <li class="list-item"  rel="vtab11"><img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e1c4d10c184c0de79f2bc3/1675740369103/icon-advantage-3-3.png" height="80" wigth="40"><br><b>Marketing design & mate-rial support</b><br>Provide a series of marketing materials including catalogs, videos, pictures, posters, pamphlets etc.</li>

</ul>
<div class="v-tab_container">
  <div id="vtab9" class="v-tab_content">
<img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e9abe84574a27622453685/1676258281034/banner-advantage-3-1.jpg">
  </div>
  <!-- #tab9 -->

  <div id="vtab10" class="v-tab_content">
<img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e9abec117211614254f64c/1676258284440/banner-advantage-3-2.jpg">
  </div>
  <!-- #tab10 -->

  <div id="vtab11" class="v-tab_content">
<img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e9abf09d4ba53b1fcb8d0c/1676258288139/banner-advantage-3-3.jpg">
  </div>
  <!-- #tab11 -->

  <!-- #tab12 --> 
</div>
</div>
</div>
  <!-- #tab3 -->
<div class="h-tab_container">
 <div id="htab4" class="h-tab_content">
       <div class="v-tab">
<ul class="v-tab_tab-head">
  <li class="list-item active"   rel="vtab13" ><img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e1c4d4f018f6216e0c6487/1675740372329/icon-advantage-4-1.png" height="80" wigth="40"><br><b>Professional training sup-port</b><br>Provide products training for partners when visiting our com-pany.</li>
  <li class="list-item"  rel="vtab14"><img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e1c5cc0444133eeaeff4c4/1675740620066/icon-advantage-4-2.png" height="80" wigth="40"><br><b>Efficient product quality service</b><br>Professional technical support team to offer Pre-sales and after-sales service & tech sup-port</li>
  <li class="list-item"  rel="vtab15"><img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e1c5cf7ae81e0b4dc34a1f/1675740623237/icon-advantage-4-3.png" height="80" wigth="40"><br><b>Document support</b><br>Provide product technical guide, test report and other documents to support marketing activities</li>
  <li class="list-item"  rel="vtab16"><img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e1c5d35f7630437c676383/1675740627388/icon-advantage-4-4.png" height="80" wigth="40"><br><b>Customized solutions sup-port</b><br>Provide customized project solution and programs accord-ing to partner's requirements.</li>
  <li rel="vtab17"><img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e1c5d607e9db6b4963bb81/1675740630429/icon-advantage-4-5.png" height="80" wigth="40"><br><b>Shipment</b><br>Booking, tracking, informing and assisting customs clearance, shipping during the whole transportation process.</li>
</ul>
<div class="v-tab_container">
  <div id="vtab13" class="v-tab_content">
<img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e9ac5c4c3b822e9aa2e967/1676258396304/banner-advantage-4-1.jpg">
  </div>
  <!-- #tab13 -->

  <div id="vtab14" class="v-tab_content">
<img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e9ac5f11721161425503c6/1676258399836/banner-advantage-4-2.jpg">
  </div>
  <!-- #tab14 -->

  <div id="vtab15" class="v-tab_content">
<img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e9ac6215b3d92931a0a93b/1676258402430/banner-advantage-4-3.jpg">
  </div>
  <!-- #tab15-->

  <div id="vtab16" class="v-tab_content">
<img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e9ac65b0934a6b3176ee2e/1676258405744/banner-advantage-4-4.jpg">
  </div>

  <div id="vtab17" class="v-tab_content">
<img src="https://static1.squarespace.com/static/63d9c525e25da025d9ead5fa/t/63e9ac684f34bb4d2976083d/1676258408327/banner-advantage-4-5.jpg">
  </div>
  <!-- #tab16 --> 
</div>
</div>
</div>
  <!-- #tab4 -->
<ul class="h-tab_tab-head">
  <li class="list-item active"  rel="htab1"style="width:20%;float:left;" >One-stop<br> purchase service</li>
  <li class="list-item"  rel="htab2" style="width:20%;float:left;">International <br>Registration Service </li>
  <li   class="list-item" rel="htab3" style="width:20%;float:left;">Local <br>Marketing Service</li>
<li   class="list-item" rel="htab4" style="width:20%;float:left;">Aftersales Services</br></br></li>
</ul>
</div>

 

 

css

.v-tab{
  display:flex;
}

.v-tab_tab-head {
list-style:none;
 font-size: 20px;    
  height: 550px;
overflow-y:auto;

    }

.v-tab_container {
  width: 30%;
  position: relative;
  display: inline-block;
  padding: 15px;
  height: 100%;
  flex: 1;

}

.v-tab_content {
  width: 100%;
  position: relative;
  display: inline-block;
 height:100%;
  padding: 0px;

}

.active {
  background-color: #0078d5;
  color: white;
  box-shadow: 0px 8px 8px grey;
  border-color: #0078d5;
}

.v-tab_tab-head {
  border-top: 0pt solid lightgrey;
  transition: .3s;
  width: 30%;
}

.h-tab_tab-head
{
list-style:none;
text-align:center;
 font-size: 20px;
line-height:40px;
}

.list-item:hover {
   background-color: #0078d5;
  color: white;
  box-shadow: 0px 8px 8px grey;
  border-color: #0078d5;
}
 

 

javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script type="text/javascript">   

  $(".h-tab_content").hide();
    $(".h-tab_content:first").show();

    $(".h-tab_tab-head li").click(function() {
    
      $(".h-tab_content").hide();
      var activeTab = $(this).attr("rel"); 
      $("#"+activeTab).fadeIn();        
      $(".h-tab_tab-head li").removeClass("list-item active");
      $(this).addClass("list-item active");
  
    });

    $(".v-tab_content").hide();
    $(".v-tab_content:first").show();

    $(".v-tab_tab-head li").click(function() {
    
      $(".v-tab_content").hide();
      var activeTab = $(this).attr("rel"); 
      $("#"+activeTab).fadeIn();        
      $(".v-tab_tab-head li").removeClass("list-item active");
      $(this).addClass("list-item active");  
    });
    
</script>

 

 

Hi,

What is site url? We can check easier