为什么我的标签栏不能工作?[Bootstrap's Togglable Tabs]

Why won't my tab panes work? [Bootstrap's Togglable Tabs ]

本文关键字：Togglable Tabs Bootstrap 标签栏 我的 不能 工作 为什么      更新时间：2023-09-26

我使用下拉菜单作为临时<select>菜单来切换<img>和相应的<p>。这两个元素共享相同的id，但由于某种原因，只有图像会切换。到底发生了什么事?

这是我的JS:

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

下面是HTML:

<div class="col-md-2 tab-content">
    <img src="http://placehold.it/120x120" class="tab-pane fade in active" id="linkOne"/>
    <img src="http://placehold.it/120x120" class="tab-pane fade" id="linkTwo"/>
</div>
<div class="col-md-10">
    <ul class="nav nav-tabs">
        <li class="dropdown active">
            <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">
                Select a Link<b class="caret"></b>
            </a>
            <ul class="dropdown-menu" role="menu">
                <li class=""><a href="#linkOne" tabindex="-1" data-toggle="tab">Link #1</a></li>
                <li class=""><a href="#linkTwo" tabindex="-1" data-toggle="tab">Link #2</a></li>
            </ul>
        </li>
    </ul>
    <span class="tab-content">
        <p class="tab-pane fade active in" id="linkOne">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean suscipit metus in dui suscipit faucibus. Integer elementum dui vitae purus varius, sed vehicula nisl pharetra.</p>
        <p class="tab-pane fade" id="linkTwo">Donec libero mi, dictum et odio a, sollicitudin sagittis arcu. In suscipit velit sed lacus aliquet, eget posuere ligula egestas.</p>
    </span>

首先(正如Tobbe指出的)，不能有多个具有相同ID值的元素。因此，您将不得不使用类。其次，你在这里滥用了选项卡的概念，所以用户放置jQuery可能更容易。第一步是隐藏所有选项卡，然后显示您需要的选项卡。

$('#myTab a[!#dropdown-toggle]').click(function (e) {
    e.preventDefault();
    $(".tab-pane").hide();
    $($(this).attr('href')).show();        
});

还请注意，我更改了选择器以忽略也是dropdown-toggle的锚。下面是一个jsFiddle来展示我的意思:

http://jsfiddle.net/dp78u/5/

相关文章：