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();        
});

另请注意，我更改了选择器以忽略同样为dropdown-toggle的锚点。这是一个jsFiddle，向您展示我的意思：

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

为什么我的标签窗格不起作用？ [Bootstrap的Togglable标签]

1 个答案: