I've encountered an issue with my HTML tabs. While I can easily switch between the first three tabs and view their content, tab 4 doesn't seem to display its associated data. It's puzzling why tab 4 is not working when the others are functioning correctly.
<div class="tabs">
<ul class="tabs-list">
<li class="active"><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3<a/></li>
<li><a href="#tab4">Tab 4<a/></li>
</ul>
<div id="tab1" class="tab active">
<div id="">
<strong>TAB 1:</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quod doloribus quaerat ab porro at necessitatibus alias molestiae dolores facere rem debitis dolorum inventore, vel error animi deleniti ipsum, labore.
</div>
</div>
<div id="tab2" class="tab">
<div id="">
<strong>TAB 2:</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quod doloribus quaerat ab porro at necessitatibus alias molestiae dolores facere rem debitis dolorum inventore, vel error animi deleniti ipsum, labore.
</div>
</div>
<div id="tab3" class="tab">
<div id="">
<strong>TAB 3:</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quod doloribus quaerat ab porro at necessitatibus alias molestiae dolores facere rem debitis dolorum inventore, vel error animi deleniti ipsum, labore.
</div>
</div>
<div id="tab4" class="tab">
<div id="">
<strong>TAB 4:</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quod doloribus quaerat ab porro at necessitatibus alias molestiae dolores facere rem debitis dolorum inventore, vel error animi deleniti ipsum, labore.
</div>
</div>
</div>
$(document).ready(function(){
$(".tabs-list li a").click(function(e){
e.preventDefault();
});
$(".tabs-list li").click(function(){
var tabid = $(this).find("a").attr("href");
$(".tabs-list li,.tabs div.tab").removeClass("active");
$(".tab").hide();
$(tabid).show();
$(this).addClass("active");
});
});