我有来自bootstrap的代码..并且它很好用，但我的问题是，它在重复时没有影响其他标签，我想要的是所有标签的单个ID。我怎样才能做到这一点？或者什么是最好的解决方案..
抱歉，如果我的问题很难理解或误导......
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
答案 0 :(得分：2)
如果我理解你的问题，那么href需要与面板的相关div一起是唯一的。 bootply demo - 像这样：
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">a</div>
<div role="tabpanel" class="tab-pane" id="profile">b</div>
<div role="tabpanel" class="tab-pane" id="messages">c</div>
<div role="tabpanel" class="tab-pane" id="settings">d</div>
</div>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home2" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile2" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages2" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings2" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home2">e</div>
<div role="tabpanel" class="tab-pane" id="profile2">f</div>
<div role="tabpanel" class="tab-pane" id="messages2">g</div>
<div role="tabpanel" class="tab-pane" id="settings2">h</div>
</div>
</div>
答案 1 :(得分：1)
因此，只需在nav-tabs hrefs和tab窗格中添加唯一ID即可。 Id应该是唯一的（意味着每页一个），所以如果你有一个#profile然后下一个，你将不得不把它变成#profile2或其他东西。但是如果您不想在页面中添加一堆不同的ID，您可以手动添加和删除活动和类中的选项卡内容以及使用jquery自定义导航选项卡。然后，您将必须使用jquerys index（）函数来查找您单击的元素的数量，并在右侧的选项卡窗格中添加相应的类。此外，您将无法通过以下示例获得淡入淡出效果。
因此，您可以从选项卡窗格中删除ID，并从导航标签的href中删除#tabtarget，只需使用以下标记：
<ul class="nav nav-tabs">
<li class="active"><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Tab 4</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane in active">
<h3>Tab 1 Tab List 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="tab-pane">
<h3>Tab 2 Tab List 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="tab-pane">
<h3>Tab 3 Tab List 1</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div class="tab-pane">
<h3>Tab 4 Tab List 1</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Tab 4</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane in active">
<h3>Tab 1 Tab List 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="tab-pane">
<h3>Tab 2 Tab List 2</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="tab-pane">
<h3>Tab 3 Tab List 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div class="tab-pane">
<h3>Tab 4 Tab List 2</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Tab 4</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane in active">
<h3>Tab 1 Tab List 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="tab-pane">
<h3>Tab 2 Tab List 3</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="tab-pane">
<h3>Tab 3 Tab List 3</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div class="tab-pane">
<h3>Tab 4 Tab List 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
然后使用以下jquery代码来实现所需的结果：
$(document).ready(function(){
$('.nav-tabs a').click(function(e){
e.preventDefault();
var tabIndex = $('.nav-tabs a').index(this);
$(this).parent().siblings().removeClass("active");
$(this).parent().addClass("active");
$('.tab-pane:eq( '+tabIndex+' )').siblings().removeClass("in active");
$('.tab-pane:eq( '+tabIndex+' )').addClass("in active");
});
});
这是一个小提琴，可以在行动Fiddle
中向您展示