Question

因此Bootstrap文档描述了带有下拉和药片的药片作为标签栏，但两者可以合并吗？理想情况下，我想要一个药丸风格的导航栏，下降到特定的项目。选择项目后，标签内容应该更改，并且节丸变为活动状态。但是，根据我迄今为止所尝试的内容，标签内容不会改变，它是突出显示（并且不会关闭）的特定菜单项。要么我的标记错误，要么我试图将Bootstrap的两个部分组合起来，这些部分不能很好地结合在一起。

JS在这里：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>

Bootstrap药片/标签＆amp;下拉菜单。一段不幸的婚姻？

1 个答案: