jquery - Bootstrap 药丸/标签和下拉菜单。不幸的婚姻？

Question

所以 Bootstrap 文档描述了 pill with dropdowns 和 pill as tab bars，但是这两者可以结合吗？理想情况下，我希望有一个药丸式的部分导航栏，下拉到特定项目。选择项目后，选项卡内容应更改并且部分药丸变为事件状态。然而，到目前为止我已经尝试过，选项卡内容没有改变，它是突出显示(并且不会关闭)的特定菜单项。要么是我的标记严重错误，要么是我试图将 Bootstrap 的两个部分组合在一起，但它们不能很好地协同工作。

JSfiddle 在这里:http://jsfiddle.net/63kLm/

<div class="well">
<!-- Nav tabs -->
<ul class="nav nav-pills">
    <li class="">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li>
                <a href="#tab1" data-toggle="pill">Item 1</a>
            </li>
            <li>
                <a href="#tab2" data-toggle="pill">Item 2</a>
            </li>
            <li>
                <a href="#tab3" data-toggle="pill">Item 3</a>
            </li>
            <li>
                <a href="#tab4" data-toggle="pill">Item 4</a>
            </li>
            <li>
                <a href="#tab5" data-toggle="pill">Item 5</a>
            </li>
        </ul>
    </li>
    <li class="">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 2 <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li>
                <a href="#tab6" data-toggle="pill">Item 6</a>
            </li>
            <li>
                <a href="#tab7" data-toggle="pill">Item 7</a>
            </li>
            <li>
                <a href="#tab8" data-toggle="pill">Item 8</a>
            </li>
        </ul>
    </li>
    <li class="">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 3 <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li>
                <a href="#tab9" data-toggle="pill">Item 9</a>
            </li>
            <li>
                <a href="#tab10" data-toggle="pill">Item 10</a>
            </li>
        </ul>
    </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane active" id="#tab1">
        <h3>Default Item 1</h3>
    </div>
    <div class="tab-pane" id="#tab2">
        <h3>Item 2</h3>
    </div>
    <div class="tab-pane" id="#tab3">
        <h3>Item 3</h3>
    </div>
    <div class="tab-pane" id="#tab4">
        <h3>Item 4</h3>
    </div>
    <div class="tab-pane" id="#tab5">
        <h3>Item 5</h3>
    </div>
    <div class="tab-pane" id="#tab6">
        <h3>Item 6</h3>
    </div>
    <div class="tab-pane" id="#tab7">
        <h3>Item 7</h3>
    </div>
    <div class="tab-pane" id="#tab8">
        <h3>Item 8</h3>
    </div>
    <div class="tab-pane" id="#tab9">
        <h3>Item 9</h3>
    </div>
    <div class="tab-pane" id="#tab10">
        <h3>Item 10</h3>
    </div>
</div>
</div>

Answer 1

我已经使用包含 id 的完整工作代码更新了我的答案，以使事件类正常运行。
这是一个 Bootply http://www.bootply.com/114915 此外，Bootstrap 文档有一个有用的示例，我第一次错过了。 http://getbootstrap.com/javascript/#tabs

<div class="well">
<!-- Nav tabs -->
<ul id="myTab" class="nav nav-pills">
    <li class="dropdown">
        <a id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" href="#">Section 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li>
                <a href="#tab1" data-toggle="pill">Item 1</a>
            </li>
            <li>
                <a href="#tab2" data-toggle="pill">Item 2</a>
            </li>
            <li>
                <a href="#tab3" data-toggle="pill">Item 3</a>
            </li>
            <li>
                <a href="#tab4" data-toggle="pill">Item 4</a>
            </li>
            <li>
                <a href="#tab5" data-toggle="pill">Item 5</a>
            </li>
        </ul>
    </li>
    <li class="dropdown">
        <a id="myTabDrop2" class="dropdown-toggle" data-toggle="dropdown" href="#">Section 2 <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li>
                <a href="#tab6" data-toggle="pill">Item 6</a>
            </li>
            <li>
                <a href="#tab7" data-toggle="pill">Item 7</a>
            </li>
            <li>
                <a href="#tab8" data-toggle="pill">Item 8</a>
            </li>
        </ul>
    </li>
    <li class="dropdown">
        <a id="myTabDrop3" class="dropdown-toggle" data-toggle="dropdown" href="#">Section 3 <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li>
                <a href="#tab9" data-toggle="pill">Item 9</a>
            </li>
            <li>
                <a href="#tab10" data-toggle="pill">Item 10</a>
            </li>
        </ul>
    </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <h3>Default Item 1</h3>
    </div>
    <div class="tab-pane" id="tab2">
        <h3>Item 2</h3>
    </div>
    <div class="tab-pane" id="tab3">
        <h3>Item 3</h3>
    </div>
    <div class="tab-pane" id="tab4">
        <h3>Item 4</h3>
    </div>
    <div class="tab-pane" id="tab5">
        <h3>Item 5</h3>
    </div>
    <div class="tab-pane" id="tab6">
        <h3>Item 6</h3>
    </div>
    <div class="tab-pane" id="tab7">
        <h3>Item 7</h3>
    </div>
    <div class="tab-pane" id="tab8">
        <h3>Item 8</h3>
    </div>
    <div class="tab-pane" id="tab9">
        <h3>Item 9</h3>
    </div>
    <div class="tab-pane" id="tab10">
        <h3>Item 10</h3>
    </div>
</div>
</div>