Bootstrap 多级菜单和选项卡面板答案

【问题标题】：Bootstrap multi-level menu and tab panelsBootstrap 多级菜单和选项卡面板
【发布时间】：2017-10-04 14:17:29
【问题描述】：

我有这个操作引导选项卡面板的多级菜单，有点像 C# 中的 TabControl。

I'm having difficulty with this as the menu items do not get de-slected when a new one is selected and then the item can't be selected again.
它类似于这篇文章： Bootstrap 4: dropdown tab items can only be selected once

我尝试了解决方法，但它不起作用，事实上，它永远不会被解雇。不知道我做错了什么。

这是基于这里的代码： https://codepen.io/wizly/pen/BlKxo

这是一个显示行为的 Pen： https://codepen.io/anon/pen/eGRrpx

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="/Home/Index">Home</a></li>
                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">CNP<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#CNPAU" data-toggle="tab">CNPAU</a></li>
                        <li><a href="#CNPPAC" data-toggle="tab">CNPPA</a></li>
                        <li><a href="#CNPCH" data-toggle="tab">CNPCH</a></li>
                        <li><a href="#CNPV" data-toggle="tab">CNPV</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Set<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#SetCB" data-toggle="tab">CB</a></li>
                        <li><a href="#SetRCB" data-toggle="tab">RCB</a></li>
                        <li><a href="#SetRCUB" data-toggle="tab">RCUB</a></li>
                    </ul> 
                </li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>
<div id="exTab1" class="container">
  <div class="row">
    <div id="tabs" class="col-md-12">
      <ul class="nav nav-pills hide">
        <li class="active">
          <a href="#CNPAU" data-toggle="tab">CNPAU</a>
        </li>
        <li>
          <a href="#CNPPPAC" data-toggle="tab">CNPPPAC</a>
        </li>
        <li>
          <a href="#CNPCH" data-toggle="tab">CNPCH</a>
        </li>
        <li>
          <a href="#CNPV" data-toggle="tab">CNPV</a>
        </li>
        <li>
          <a href="#SetCB" data-toggle="tab">SetCB</a>
        </li>
        <li>
          <a href="#SetRRCB" data-toggle="tab">SetRRCB</a>
        </li>
        <li>
          <a href="#SetRRCUB" data-toggle="tab">SetRRCUB</a>
        </li>
      </ul>
      <div class="tab-content">
        <div class="row">&nbsp;</div>
        <div class="tab-pane" id="CNPAU">
          <div class="row">&nbsp;</div>
          <h3>CNPAU</h3>
        </div>
        <div class="tab-pane" id="CNPPPAC">
          <div class="row">&nbsp;</div>
          <h3>CNPPPAC</h3>
        </div>
        <div class="tab-pane" id="CNPCH">
          <div class="row">&nbsp;</div>
          <h3>CNPCH</h3>
        </div>
        <div class="tab-pane" id="CNPV">
          <div class="row">&nbsp;</div>
          <h3>CNPV</h3>
        </div>
        <div class="tab-pane" id="SetCB">
          <div class="row">&nbsp;</div>
          <h3>SetCB</h3>
        </div>
        <div class="tab-pane" id="SetRRCB">
          <div class="row">&nbsp;</div>
          <h3>SetRRCB</h3>
        </div>
        <div class="tab-pane" id="SetRRCUB">
          <div class="row">&nbsp;</div>
          <h3>SetRRCUB</h3>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： jquery twitter-bootstrap

【解决方案1】：

不确定这是否是正确的方法，但这可以解决问题：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
     // gets activated tab
    var target = $(e.target).attr("href");
    // remove active from all other menu items
    $(".nav li").removeClass("active");
    // set active for current menu item
    $('a[href="' + target + '"]').parent('li').addClass('active');
});

【讨论】：