Twitter bootstrap go to specific tab for nested tabs

Question

I'm trying to have bootstrap jump to a specific tab upon page load. While I've found few answers here, in my particular case I have nested tabs which complicates things. Right now I have implemented the solution as in https://stackoverflow.com/a/15060168/1829478, however I'm still having trouble getting it to work. He mentioned that "childrens should have class="nested"" , what does that mean?

function handleTabLinks() {
    if(window.location.hash == '') {
        window.location.hash = window.location.hash + '#_';
    }
    var hash = window.location.hash.split('#')[1];
    var prefix = '_';
    var hpieces = hash.split('/');
    for (var i=0;i<hpieces.length;i++) {
        var domelid = hpieces[i].replace(prefix,'');
        var domitem = $('a[href=#' + domelid + '][data-toggle=tab]');
        if (domitem.length > 0) {
            domitem.tab('show');
        }
    }
    $('a[data-toggle=tab]').on('shown', function (e) {
        if ($(this).hasClass('nested')) {
            var nested = window.location.hash.split('/');
            window.location.hash = nested[0] + '/' + e.target.hash.split('#')[1];
        } else {
            window.location.hash = e.target.hash.replace('#', '#' + prefix);
        }
    });
}

add class="nested" to the links of your nested tabs. Show your html and links. And where and how do you call `handleTabLinks`? — Bass Jobsen, May 17 '13 at 20:26

score 1 · Answer 1 · edited May 23 '17 at 12:07

I hope this helps someone, it's a complete working solution for nested tabs with a hash so you can navigate to the nested tab from a url.

To build this I used the bootstrap nested tabs from this code --> http://jsfiddle.net/simbirsk/RS4Xh/2/ and the javascript from here --> https://stackoverflow.com/a/15060168/1829478

<div class="tabbable">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab" onclick="handleTabLinks();">Section 1</a></li>
        <li><a href="#tab2" data-toggle="tab" onclick="handleTabLinks();">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" class="nested" onclick="handleTabLinks();">Section 3</a></li>
                    <li><a href="#tab4" data-toggle="tab" class="nested" onclick="handleTabLinks();">Section 4</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active nested" id="tab3">
                        <p>I'm in Section 3.</p>
                    </div>
                    <div class="tab-pane nested" id="tab4">
                        <p>Howdy, I'm in Section 4.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    handleTabLinks();
    function handleTabLinks() {
    if(window.location.hash == '') {
        window.location.hash = window.location.hash + '#_';
    }
    var hash = window.location.hash.split('#')[1];
    var prefix = '_';
    var hpieces = hash.split('/');
    for (var i=0;i<hpieces.length;i++) {
        var domelid = hpieces[i].replace(prefix,'');
        var domitem = $('a[href=#' + domelid + '][data-toggle=tab]');
        if (domitem.length > 0) {
            domitem.tab('show');
        }
    }
    $('a[data-toggle=tab]').on('shown', function (e) {
        if ($(this).hasClass('nested')) {
            var nested = window.location.hash.split('/');
            window.location.hash = nested[0] + '/' + e.target.hash.split('#')[1];
        } else {
            window.location.hash = e.target.hash.replace('#', '#' + prefix);
        }
    });
}
</script>

Twitter bootstrap go to specific tab for nested tabs

1 Answers1