我使用下拉菜单作为临时工具 <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为了更好的衡量。
最佳答案
首先(正如 Tobbe 指出的),多个元素不能具有相同的 ID 值。因此,您将不得不使用类。其次,您在这里滥用了选项卡的概念,因此用户放置 jQuery 可能更容易。第一步是隐藏所有选项卡,然后显示您需要的选项卡。
$('#myTab a[!#dropdown-toggle]').click(function (e) {
e.preventDefault();
$(".tab-pane").hide();
$($(this).attr('href')).show();
});
另请注意,我更改了选择器以忽略也是下拉切换
的 anchor 。这是一个 jsFiddle 来向您展示我的意思:
关于javascript - 为什么我的选项卡面板无法工作? [ Bootstrap 可切换选项卡],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24317649/