javascript - 使用 jQuery 隐藏 Bootstrap 选项卡直至 .active

Question

您可以在这里查看我的所有代码:https://jsfiddle.net/Magne/k6hqmtgo/

我目前正在使用 Bootstrap 和 jQuery。我想要做的是隐藏除第一个选项卡之外的所有选项卡，并仅在我使用“下一步”按钮访问选项卡后才显示它们。然后保持可见。

我正在努力通过我的类(class) .ghost{display:none} 实现这一目标分配给我的<li>像这样:

 <li class="active"><a href="#tab1" data-toggle="tab">Shipping</a></li>
 <li class="ghost"><a href="#tab2" data-toggle="tab">Quantities</a></li>
 <li class="ghost"><a href="#tab3" data-toggle="tab">Summary</a></li>

然后尝试使用 .removeClass 让它们可见或.show像这样:

//This is supposed to make them visible
if ($('.ghost').hasClass('active')) {
            $('.ghost').show();
        }               
//Or this maybe?
if ($('.ghost').hasClass('active')) {
            $('.ghost').removeClass("ghost");
        }       

这不起作用，我真的不知道为什么。

您可以在这里查看我的代码:https://jsfiddle.net/Magne/18qz0pad/29/

非常感谢您的帮助

谢谢! :D

Answer 1

你的 css 比 js show 函数更重要，相反，如果你使用 next 按钮删除 ghost 类，你就会最终得到你想要的结果

您已经绑定(bind)了下一个按钮单击，因此我们可以利用此代码来删除 ghost 类

<强> JSFIDDLE

JS

//Next and prev buttons
$('.btnNext').click(function(){
    var nextListItem = $('.nav-tabs > .active').next('li');
    nextListItem.removeClass('ghost');
    nextListItem.find('a').trigger('click');
});

PS。您似乎没有使用 myTab a js 代码，因此我已将其删除