我有一个带有选项卡的部分,这些选项卡在页面加载时都以“ hidden”类开头,默认情况下,第一个选项卡包含内容时将处于活动状态。 但是有时第一个或第二个选项卡不包含内容,因此,如果第三个选项卡具有内容,则该选项卡应该处于活动状态,但我似乎无法获得一致的结果。
由于它们总是在页面加载时被隐藏,因此我将代码设置在on(“ load”)函数下,但是有时第二个选项卡将处于活动状态,即使两个选项卡都未隐藏,第一个选项卡也不会处于活动状态。似乎是在检查第一个选项卡上的隐藏类之前,在第二个选项卡上设置了活动类。
这是jQuery:
$(window).on("load",function () {
if($el.find("> ul > li:first").hasClass("hidden") ) {
$el.find("> ul > li").nextAll("li").not(".hidden").first().addClass("active selected");
$el.find(">div").hide().removeClass("active");
$("#" + $el.find(">ul > li.selected > a").attr("href").split("#")[1]).fadeIn();
}
});
和HTML:
<ul class="col-xs-12 noPadding">
<li class="content1_tab hidden">
<a href="#content1_tab">Some Content</a>
</li>
<li class="content2_tab hidden">
<a href="#content2_tab">Some Content</a>
</li>
<li class="content3_tab">
<a href="#content3_tab ">Some Content</a>
</li>
<li class="content4_tab hidden">
<a href="#content4_tab ">Some Content</a>
</li>
</ul>
总结一下,如何检查隐藏类的每次出现并在未隐藏的第一个选项卡上设置活动类?
编辑**好的,我能够将第一个选项卡设置为活动状态,尽管它不会产生一致的结果。在大多数情况下,第一个选项卡处于活动状态,但有时没有。我确实尝试过文档而不是窗口,但这无济于事。可以解决这个问题吗?