我有以下 html:

<div class="menu_tab row"> 
    <div class="active" rel="#tab1">Tab 1</div> 
    <div rel="#tab2">Tab 2</div> 
    <div rel="#tab3">Tab 3</div> 
    <div rel="#tab4">Tab 4</div> 
</div> 
... 
<div id="tab1" class="tab_content">...</div> 
<div id="tab2" class="tab_content">...</div> 
<div id="tab3" class="tab_content">...</div> 
<div id="tab4" class="tab_content">...</div> 

并在单独的 js 文件中添加以下 javascript:

$(document).ready(function () { 
    $(".tab_content").hide(); 
    $(".tab_content:first").show(); 
}); 
 
$(document).on('click', ".menu_tab div", function() { 
    $(".menu_tab div").removeClass("active"); 
    $(this).addClass("active"); 
    $(".tab_content").hide(); 
    var activeTab = $(this).attr("rel"); 
    $(activeTab).show(); 
}); 

我可以单击菜单选项卡，选项卡就会更改。但问题是，当应用程序首次加载时，它会显示所有四个选项卡，但当我单击时，它可以正常工作。所以我的想法是，这部分代码:

$(document).ready(function () { 
   $(".tab_content").hide(); 
   $(".tab_content:first").show(); 
}); 

不工作。有人能告诉我为什么吗？提前致谢!

请您参考如下方法:

尝试以下操作:

$(".tab_content").hide(); 
var activeTab = $('.active').attr("rel"); 
$(activeTab).show(); 

或者使用CSS:

.tab_content {display:none;} 
.tab_content:first-child {display:block;}