Question

我有以下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();
});

无效。有人可以告诉我为什么吗？提前谢谢！

Answer 1

尝试以下方法：

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

或使用css：

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

Answer 2

将$(".tab_content:first").show();更改为$(".tab_content:first-child").show();

Answer 3

它已经在工作了。我发现没有问题。

Slider

Javascript .hide（）和.show（）不起作用

3 个答案: