Geek asks and answers

Bootstrap pills / tabs and drop down lists. Unhappy marriage?

So the Bootstrap documentation describes drop-down tablets and tablets in the form of tab bars, but can they be combined? Ideally, I would like to use the navigation bar in the form of tablets for sections, dropping to specific items. When an item is selected, the contents of the tab should change and the tablet section will become active. However, with what I have tried so far, the contents of the tab do not change, and this is a special menu item that highlights (and does not turn off). Either I have the markup terribly wrong, or I'm trying to combine two parts of Bootstrap that don't play well together.

JSfiddle here: 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>
+3
1

, , .
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>
+3

More articles:


All Articles