Bootstrap 2.1 javascript nested tabs: inner tab closes outer tab

Question

I thought I ask SO for help before I file a bugreport. I have a twitter bootstrap tab inside another tab, and wenn I click to change to the next inner tab, bootstrap.js does not only remove the .active from the closest .tab-pane, but also from the outer .tab-pane. I tried to dive into the code, but my javascript isn't good enough to fully understand it. I tried to manually add the active class to the outer .tab-pane with jquery and also tried .tab('show') on the data-toggle="tab" element. It seems like that bootstrap.js finds all .tab-content and then removes the .active from its children. Or maybe I have a mistake in my markup (well from experience 99% of the time it's human error). The javascript is all boilerplate, I just call the first tab with tab('show'). Here's my markup:

<ul id="sidebar" class="unstyled naviTab">
    <li class="accordion-group">...</li>
    <li class="accordion-group active">
        <h2 id="module1-title1" class="module-header" href="#getting-started" data-toggle="tab" data-original-title="">...</h2>
    </li>
</ul>
...
...
<ul class="unstyled tab-content">
    <li id="course" class="tab-pane">
    <li id="getting-started" class="tab-pane active">
        <div class="wizard stepTab">
            <a class="active" href="#module1-step1" data-toggle="tab">1.Step</a>
            <a class="" href="#module1-step2" data-toggle="tab">2.Step</a>
            <a class="" href="#module1-step3" data-toggle="tab">3.Step</a>
        </div>
        <ul class="links unstyled tab-content">
            <li id="module1-step1" class="tab-pane active" data-original-title="">...</li>
            <li id="module1-step2" class="tab-pane">
            <li id="module1-step3" class="tab-pane">
        </ul>
    </li>
</ul>

And after clicking a href="#module1-step2":

<ul id="sidebar" class="unstyled naviTab">
    <li class="accordion-group">...</li>
    <li class="accordion-group active">
        <h2 id="module1-title1" class="module-header" href="#getting-started" data-toggle="tab" data-original-title="">...</h2>
    </li>
</ul>
...
...
<ul class="unstyled tab-content">
    <li id="course" class="tab-pane">
    <li id="getting-started" class="tab-pane">
        <div class="wizard stepTab">
            <a class="" href="#module1-step1" data-toggle="tab">1.Step</a>
            <a class="active" href="#module1-step2" data-toggle="tab">2.Step</a>
            <a class="" href="#module1-step3" data-toggle="tab">3.Step</a>
        </div>
        <ul class="links unstyled tab-content">
            <li id="module1-step1" class="tab-pane" data-original-title="">...</li>
            <li id="module1-step2" class="tab-pane active">
            <li id="module1-step3" class="tab-pane">
        </ul>
    </li>
</ul>

Notice how the outer tab-panes are all inactive.

If anybody has run into this problem or can tell me where I messed up I'd be very grateful!

EDIT1 Here's my javascript. I actual don't have to include any js because bootstrap.js works just fine just with the html attributes(and that's probably the reason why it breaks). I tried different approaches (.each(), e.preventDefault()) but nothing seemed to work. But here's my js anyway:

<script>
/*global $*/
"use strict";
$(function () {
    $('.naviTab li:first-child h1').tab('show');  //shows the first child of the outer tab on load. Could just add an .active to the markup instead
    $('#sidebar li:first-child').addClass('active');  //this is for the accordion that the outer tab links are enbedded in
    $('.stepTab a').click(function () {
        if ($(this).closest('li').hasClass('active') == false) {  //this is supposed to check if the outer tab has .active and add it if it doesn't. Unfortunately it doesn't work...
            $(this).closest('li').addClass('active');
        }
        $(this).siblings().removeClass('active');  //this is for css styling purposes on the inner tab a's
        $(this).addClass('active');
    });
});
</script>

Cheers for any suggestions!

Answer 1

As stated by albertedevigo you only need to provide a unique ID's to each tab, no matter if the tab is nested, this is because the javascript action will open/close this specific tab:

<div class="tabbable">
<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
        <p>Howdy, I'm in Section 2.</p>
        <div class="tabbable">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab3" data-toggle="tab">Section 3</a></li>
                <li><a href="#tab4" data-toggle="tab">Section 4</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab3">
                    <p>I'm in Section 3.</p>
                </div>
                <div class="tab-pane" id="tab4">
                    <p>Howdy, I'm in Section 4.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Take a look at jsfiddle.net/simbirsk/RS4Xh/2

Answer 2

也许这应该对使用Bootstrap框架的http://www.juvenpajares.com/?p=204自定义手风琴有所帮助

Answer 3

The problem was that I didn't use an for the links in the inner tabs, but just a div with a's(had to do it for css reasons). I didn't know that bootstrap requires the links to be in a ul > li > a format. Now it know! I'll leave the question in case somebody has the same problem. Cheers for the help!