javascript - 为什么我的选项卡面板无法工作？ [ Bootstrap 可切换选项卡]

Question

我使用下拉菜单作为临时工具 <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>

这是我的 jsfiddle为了更好的衡量。

Answer 1

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

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

另请注意，我更改了选择器以忽略也是下拉切换的 anchor 。这是一个 jsFiddle 来向您展示我的意思:

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