nav-pill标签切换异常：激活项隐藏、双击切换及页面加载触发需求

看起来你遇到的双击问题，大概率是因为你的代码和Bootstrap默认的Tab切换事件冲突了——第一次点击时，Bootstrap先自动切换了active类，你的代码才执行状态切换，导致状态不同步，需要第二次点击才能修正。下面给你一套完整的解决方案，既能实现「隐藏激活标签、显示未激活标签，点击后反转状态」的需求，又能解决双击问题，还能在页面加载时自动触发初始状态：

第一步：整理HTML结构（补全你的代码片段） #

先确保你的标签栏和对应内容区域结构完整：

<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 Multiple Resources <i class="fa fa-angle-double-right"></i>
    </a>
  </li>
  <!-- 可添加更多标签项 -->
</ul>

<!-- 对应的Tab内容区域 -->
<div class="tab-content">
  <div class="tab-pane active" id="sres">Single Resource Content</div>
  <div class="tab-pane" id="mres">Multiple Resources Content</div>
  <!-- 对应更多内容面板 -->
</div>

第二步：编写修正后的jQuery代码 #

我们手动控制active类切换和显示隐藏逻辑，避免和Bootstrap默认事件冲突：

$(document).ready(function() {
  // 页面加载完成后，初始化状态：隐藏激活标签，显示未激活标签
  initNavPillState();

  // 给每个标签绑定点击事件
  $('#navpill .navGen a').click(function(e) {
    // 阻止Bootstrap默认的Tab切换事件，避免冲突
    e.preventDefault();
    
    // 获取当前点击的标签父元素（li）
    var $clickedLi = $(this).closest('li');
    
    // 如果点击的已经是激活状态，直接返回（避免无效操作）
    if ($clickedLi.hasClass('active')) return;

    // 找到当前激活的标签
    var $activeLi = $('#navpill .navGen.active');
    
    // 切换激活状态：移除旧激活标签的active类，显示它；给新标签加active类，隐藏它
    $activeLi.removeClass('active').show();
    $clickedLi.addClass('active').hide();

    // 手动切换对应的Tab内容面板
    var targetTab = $(this).attr('href');
    $('.tab-content .tab-pane').removeClass('active');
    $(targetTab).addClass('active');
  });
});

// 初始化状态的函数
function initNavPillState() {
  // 隐藏激活的标签，显示其他未激活的标签
  $('#navpill .navGen.active').hide();
  $('#navpill .navGen:not(.active)').show();
}

为什么这样能解决双击问题？ #

之前的双击问题，本质是Bootstrap的默认Tab切换和你的自定义逻辑抢着修改active类，导致第一次点击后状态混乱。现在我们通过e.preventDefault()阻止了Bootstrap的默认行为，完全手动控制标签的激活状态、显示隐藏以及内容面板的切换，逻辑清晰且无冲突，自然就不需要双击了。

另外，$(document).ready()里调用initNavPillState()，确保页面加载完成后立刻应用初始状态，不需要额外触发点击事件。

内容的提问来源于stack exchange，提问作者Sidharth