隐藏活动的nav-pill选项卡，同时显示不活跃的nav-pill选项卡

Question

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

.design-winner-desc {
clear: both;
width: 950px;
padding-top: 30px;
padding-left: 30px;
margin-left: 130px;

Jquery代码：

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

Answer 1

您可以使用类似的内容..使用$(this)和add/removeClass可以更轻松地控制它，使用.index()您可以指定需要显示的标签索引我认为您需要显示.navGen

的标签

$(".navGen").on('click',function(){
  $(".navGen , .tab-pane").addClass('active');
  $(this).removeClass('active');
  $('.tab-pane:eq('+$(this).index()+')').removeClass('active');
});

.navGen , .tab-pane{
  display : none;
}
.navGen.active , .tab-pane.active{
  display : block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


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

Answer 2

尝试使用CSS，如下所示

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

CSS：

#navpill li.active{
  display: none;
}