0

我正在尝试将选项卡嵌套在下拉列表中，但似乎无法使其正常工作。我可以让选项卡在第一次单击时呈现，但当我返回并尝试再次单击它时却不行。我创建了一个 bl.ocks http://bl.ocks.org/caseymm/6090448

<div class="tab-pane" id="pills-basic">
        <div class="tabbable">
            <div class="btn-group">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                Action
                    <span class="caret"></span>
            </a>

            <ul class="dropdown-menu" >
                <li><a href="#APS" data-toggle="tab">APS</a></li>
                                    <li><a href="#Cherokee" data-toggle="tab">Cherokee County</a></li>
                                    <li><a href="#Clayton" data-toggle="tab">Clayton County</a></li>
                <li><a href="#Cobb" data-toggle="tab">Cobb County</a></li>
                                    <li><a href="#DeKalb" data-toggle="tab">DeKalb County</a></li>
                                    <li><a href="#Fayette" data-toggle="tab">Fayette County</a></li>
                                    <li><a href="#Fulton" data-toggle="tab">Fulton County</a></li>
                                    <li><a href="#Gwinnett" data-toggle="tab">Gwinnett County</a></li>
                                    <li><a href="#Henry" data-toggle="tab">Henry County</a></li>
                                    <li><a href="#Marietta" data-toggle="tab">Marietta City</a></li>

                        </ul>
                     </div>   

            <div class="tab-content">
                                    <div id="Home" class="tab-pane active">
                                        Some stuff.
                                    </div>
                <div id="Cherokee" class="tab-pane">
                                        <div class="rnkw-lists" data-rnkw-width="100%" data-rnkw-height="1376" data-rnkw-id="930926"></div>
                                        <a href="http://www.ranker.com/list/cherokee-county/atlantajournalconstitution" style="display:block; width:100%; padding-top:7px; font-size:12px; text-align:center;">Cherokee County</a>
                                    </div>
                                    <div id="Cobb" class="tab-pane">
                                        <div class="rnkw-lists" data-rnkw-width="100%" data-rnkw-height="1510" data-rnkw-id="930947"></div>
                                        <a href="http://www.ranker.com/list/cobb-county/atlantajournalconstitution" style="display:block; width:100%; padding-top:7px; font-size:12px; text-align:center;">Cobb County</a>
                                    </div>
                                    <div id="DeKalb" class="tab-pane">
                                        <div class="rnkw-lists" data-rnkw-width="100%" data-rnkw-height="1376" data-rnkw-id="930937"></div>
                                        <a href="http://www.ranker.com/list/dekalb-county/atlantajournalconstitution" style="display:block; width:100%; padding-top:7px; font-size:12px; text-align:center;">DeKalb County</a>
                </div>
                                    <div id="Gwinnett" class="tab-pane">
                                        <div class="rnkw-lists" data-rnkw-width="100%" data-rnkw-height="1309" data-rnkw-id="930945"></div>
                                        <a href="http://www.ranker.com/list/gwinnett-county/atlantajournalconstitution" style="display:block; width:100%; padding-top:7px; font-size:12px; text-align:center;">Gwinnett County</a>
                                    </div>
                                    <div id="Marietta" class="tab-pane">
                                        <div class="rnkw-lists" data-rnkw-width="100%" data-rnkw-height="1242" data-rnkw-id="930911"></div>
                                        <a href="http://www.ranker.com/list/marietta-city/atlantajournalconstitution" style="display:block; width:100%; padding-top:7px; font-size:12px; text-align:center;">Marietta City</a>
                                    </div>
                                    <div id="APS" class="tab-pane">
                                        <div class="rnkw-lists" data-rnkw-width="100%" data-rnkw-height="1912" data-rnkw-id="931127"></div>
                                        <a href="http://www.ranker.com/list/atlanta-public-schools-v1/atlantajournalconstitution" style="display:block; width:100%; padding-top:7px; font-size:12px; text-align:center;">Atlanta Public Schools</a>
                                    </div>
                                    <div id="Fayette" class="tab-pane">
                                        <div class="rnkw-lists" data-rnkw-width="100%" data-rnkw-height="1108" data-rnkw-id="931534"></div>
                                        <a href="http://www.ranker.com/list/fayette-county-public-schools/atlantajournalconstitution" style="display:block; width:100%; padding-top:7px; font-size:12px; text-align:center;">Fayette County Public Schools</a>
                                    </div>
                                    <div id="Henry" class="tab-pane">
                                        <div class="rnkw-lists" data-rnkw-width="100%" data-rnkw-height="1242" data-rnkw-id="931537"></div>
                                        <a href="http://www.ranker.com/list/henry-county-school-system/atlantajournalconstitution" style="display:block; width:100%; padding-top:7px; font-size:12px; text-align:center;">Henry County School System</a>
                                    </div>
                                    <div id="Fulton" class="tab-pane">
                                        <div class="rnkw-lists" data-rnkw-width="100%" data-rnkw-height="907" data-rnkw-id="931543"></div>
                                        <a href="http://www.ranker.com/list/fulton-county/atlantajournalconstitution" style="display:block; width:100%; padding-top:7px; font-size:12px; text-align:center;">Fulton County</a>
                                    </div>
                                    <div id="Clayton" class="tab-pane">
                                        <div class="rnkw-lists" data-rnkw-width="100%" data-rnkw-height="1711" data-rnkw-id="931546"></div>
                                        <a href="http://www.ranker.com/list/clayton-county-public-schools/atlantajournalconstitution" style="display:block; width:100%; padding-top:7px; font-size:12px; text-align:center;">Clayton County Public Schools</a>
                                    </div>
            </div><!-- /.tab-content -->


    </div>

    </div>
4

1 回答 1

0

关于您的标记的某些内容不太正确，或者可能是 tab() 和 dropdown() 发生冲突，因此没有从列表项中删除活动类。

在任何情况下，您都可以使用以下 jQuery 将其锤炼成形状：

$('#pills-basic a[data-toggle="tab"]').on('shown', function (e) {
    $('#pills-basic .dropdown-menu li.active').removeClass('active');
    $(this).parent('li').addClass('active');
})

http://jsfiddle.net/isherwood/28qCe/5/

于 2013-07-26T18:29:36.323 回答