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>
