Bootstrap tab navigation using dropdown menu links

Question

I'm trying to navigate through tabs in bootstrap 2.3.2 using dropdown menu links and buttons.

I'm able to navigate to different tabs using links in the dropdown menu, however when I navigate back to the tab with the dropdown menu, the links in the dropdown seem to have been disabled.

Demo

<div class="modal-body chart-edit-body">
<div class="tabbable tabs-left">
    <ul class="nav nav-tabs">
        <li class="active"> 
            <a href="#tab-settings" data-toggle="tab">
                Settings
            </a>
        </li>
        <li> 
            <a href="#tab-custom" data-toggle="tab">Customize</a>

        </li>
    </ul>
    <div class="tab-content" id="edit-chart-filter">
        <div class="tab-pane active" id="tab-settings">Settings Tab</div>
        <div class="tab-pane" id="tab-custom">Customize Tab
            <div id="filters-list-custom" class="btn-group"> 
                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                    Go to Hidden tabs
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu align-left-ul">
                    <li> 
                        <a href="#tab-hidden1" role="button">Hidden Tab 1</a>  
                        <a href="#tab-hidden2" role="button">Hidden Tab 2</a>  
                        <a href="#tab-hidden3" role="button">Hidden Tab 3</a> 
                    </li>
                </ul>
            </div>
        </div>
        <div class="tab-pane" id="tab-hidden1">
            Hidden Tab 1 
            <a href="#tab-custom" role="button" class="btn">
                Back to dropdown menu
            </a>
        </div>
        <div class="tab-pane" id="tab-hidden2">
            Hidden Tab 2
            <a href="#tab-custom" role="button" class="btn">
                Back to dropdown menu
            </a>
        </div>
        <div class="tab-pane" id="tab-hidden3">
            Hidden Tab 3
            <a href="#tab-custom" role="button" class="btn">
                Back to dropdown menu
            </a>
        </div>
    </div>
</div>

Any ideas as to why this is happening?

Answer 1

You put all your links in one <li> tag. They must be seperate tags

 <li> <a href="#tab-hidden1" role="button">Hidden Tab 1</a>  </li>
 <li> <a href="#tab-hidden2" role="button">Hidden Tab 2</a> </li> 
 <li> <a href="#tab-hidden3" role="button">Hidden Tab 3</a> </li>

Also remove the active class once clicked. If you not remove, after returning to dropdow the link you clicked will be active.

$(function () {
    $('#edit-chart-filter a').click(function (e) {
        e.preventDefault();
        $('a[href="' + $(this).attr('href') + '"]').tab('show');
        $(this).parent().removeClass('active');
    })

});