javascript - 使用下拉菜单链接的 Bootstrap 选项卡导航

Question

我正在尝试使用下拉菜单链接和按钮在 bootstrap 2.3.2 中的选项卡中导航。

我可以使用下拉菜单中的链接导航到不同的选项卡，但是当我使用下拉菜单导航回选项卡时，下拉菜单中的链接似乎已被禁用。

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>

关于为什么会发生这种情况有什么想法吗？

Answer 1

您将所有链接放在一个 <li> 中标签。它们必须是单独的标签

 <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>

单击后也删除事件类。如果您不删除，返回下拉列表后，您点击的链接将处于事件状态。

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

});