Javascript 隐藏引导选项卡，直到.active与jQuery一起使用

您可以在此处查看我的所有代码：

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

我试图通过将类

.ghost{display:none}

分配给我的

来实现这一点，如下所示：

 <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>

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

这不管用，我真的不知道为什么

您可以在此处查看我的代码：

我真的很感谢你的帮助

---

谢谢D

您的css比js

show

功能更重要，相反，如果您使用

下一步

按钮删除

重影

类，您将得到想要的结果

您已经绑定到next按钮click，因此我们可以利用此代码删除

ghost

类

JS

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

---

另外，您似乎没有使用

myTab a

js代码，因此我删除了它您的css，它比js

show

功能更重要，相反，如果您使用

next

按钮删除

ghost

类，您将得到想要的结果

您已经绑定到next按钮click，因此我们可以利用此代码删除

ghost

类

JS

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

---

另外，您似乎没有使用

myTab a

js代码，因此我已将其删除

我不确定删除该类是否会使属性自动再次设置为true。尝试添加一个类，您可以在其中将display设置为display:initial，现在删除名为.ghost的旧类谢谢您的帮助。我试过这样做：

if（$（'.ghost'）.hasClass（'active'））{$（'.ghost'）.addClass（'shine'）；}

和

.shine{display:initial}

，但它仍然不起作用。它甚至没有添加或删除类。我不确定删除类是否会使属性自动再次设置为true。尝试添加一个类，您可以在其中将display设置为display:initial，现在删除名为.ghost的旧类谢谢您的帮助。我试过这样做：

if（$（'.ghost'）.hasClass（'active'））{$（'.ghost'）.addClass（'shine'）；}

和

.shine{display:initial}

，但它仍然不起作用。它甚至没有添加或删除classesTry haxxxton下面的答案谢谢！我们正在到达那里，但这使它们都可见，我只想要一个活跃的。。。举个例子：我去了Tab2，它显示了，但是Tab3在我去之前一直隐藏着。我们能不能只针对.removeClass的下一个选项卡？我做到了！我删除了

#tab1

，并针对您的代码设置了

.next（）

，如下所示：非常感谢@MagneRaknaren，awesome，真实地展示了有多少种方法可以剥猫皮：）我建议使用上面的更新方法，但是它创建的事件侦听器更少，因为您已经在使用

btnNext

handler@MagneRaknaren,请考虑将此解决方案标记为搜索者可以在未来寻找帮助的答案，谢谢！我们正在到达那里，但这使它们都可见，我只想要一个活跃的。。。举个例子：我去了Tab2，它显示了，但是Tab3在我去之前一直隐藏着。我们能不能只针对.removeClass的下一个选项卡？我做到了！我删除了

#tab1

，并针对您的代码设置了

.next（）

，如下所示：非常感谢@MagneRaknaren，awesome，真实地展示了有多少种方法可以剥猫皮：）我建议使用上面的更新方法，但是它创建的事件侦听器更少，因为您已经在使用

btnNext

handler@MagneRaknaren,请考虑将这个解决方案标记为搜索者可以找到他们未来寻求帮助的答案。