Jquery 隐藏活动导航丸选项卡，同时显示非活动导航丸选项卡

我制作了一个导航丸，我想隐藏活动选项卡，并显示非活动选项卡。当我单击非活动选项卡时，反之亦然。我在jquery中尝试了一个代码，但我需要在tab上单击两次。而且，在加载页面时，我需要触发这个单击事件

 <ul class="nav nav-pills" id='navpill'>
    <li class="active navGen"><a href="#sres" data-toggle="tab" style="padding:7px 7px 7px 7px;">Add Single Resource <i class="fa fa-angle-double-right"></i></a></li
    <li class="navGen"><a href="#mres" data-toggle="tab" style="padding:7px 7px 7px 7px;">Add Bulk Resources <i class="fa fa-angle-double-right"></i></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane fade in active" id="sres">
      Content1 here
    </div>
    <div class="tab-pane fade" id="mres">
      Content2 here
    </div>
</div>

---

尝试使用CSS，如下所示

$(".navGen").on('click',function(){
   $("#navpill li.active").removeClass('active');
   $(this).addClass('active');
});

CSS:

---

你可以用这样的东西。。使用

$（this）

和

添加/删除类

将更容易控制它，通过使用

.index（）

您可以指定需要显示的选项卡的索引，我假设您需要将选项卡显示到

.navGen

$（“.navGen”）。在（'click'，function（）上{
$（“.navGen，.tab窗格”）.addClass（'active'）；
$（this.removeClass（'active'）；
$（'.tab窗格：eq（'+$（this.index（）+'））.removeClass（'active'）；
});
.navGen，.tab窗格{
显示：无；
}
.navGen.active、.tab-pane.active{
显示：块；
}







这里是Content1
这里是内容2
No，我仍然需要点击两次按钮，还需要在Load上触发click事件您是否有意将活动类与jQuery的show/hide方法的内联show/hide混合在一起？一种替代方法是添加/删除/切换活动类。您还可以使用
$（this）.show（）
与
$（'yourSelector'）.hide（）结合使用来隐藏所有内容，并显示单击的内容pill@GregMcMullen实际上，我需要这样的代码：当一个选项卡被选中时，我需要隐藏那个活动的选项卡。选项卡的其余部分必须显示在那里。之后，当我单击另一个选项卡时，我需要隐藏该选项卡，并且必须显示非活动选项卡。您应该能够根据需要调整实际代码。方法是一样的。你能和团队的观察者一起检查它，直到你试图抓住你想要发生的事情吗。单击导航丸项目时，是否要显示/隐藏内容？还是实际的导航项？如果是这样的话，穆罕默德的密码就是你想要的。对我来说它不起作用。你能和团队一起检查一下吗viewer@Sidharth不工作不足以描述问题。。如果你有一个实时站点，让我检查一下。添加代码后，它会像正常的导航药丸一样工作。我会给我的团队查看器ID和密码。你能检查一下我的问题吗code@Sidharth我不是在和团队查看器一起工作。。所以请删除您的id、密码。。我会把你的问题投赞成票，也许其他人能帮上忙。祝你好运
$(".navGen").on('click',function(){
   $("#navpill li.active").removeClass('active');
   $(this).addClass('active');
});

#navpill li.active{
  display: none;
}