扩展引导标签
问题描述:
使用最新版本的Bootstrap,我正在寻找一些标签帮助。这是我正在做的...扩展引导标签
我有一个链接位于我的网站的标题。点击后,查看器将被带到位于内容区域底部的规则选项卡。应选择规则选项卡并准备好。
HTML:
<div id="header">
<a href="" title="Rules">Click to read the rules</a>
</div> <!-- end header -->
<div id="content">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#rules">Rules</a></li>
<li><a href="#settings">Settings</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="rules">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
</div> <!-- end content -->
JS:
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
答
HTML
<div id="header">
<a href="#" title="Rules">Click to read the rules</a>
</div> <!-- end header -->
<div id="content">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#profile">Profile</a></li>
<li><a data-toggle="tab" href="#rules">Rules</a></li>
<li><a data-toggle="tab" href="#settings">Settings</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">1...</div>
<div class="tab-pane" id="profile">2...</div>
<div class="tab-pane" id="rules">3...</div>
<div class="tab-pane" id="settings">4...</div>
</div>
</div> <!-- end content -->
JS
$('#header a').click(function(e) {
e.preventDefault();
$('#myTab a[href="#rules"]').tab('show');
});
小提琴
答
试试这个:
$('#header a').click(function(e) {
e.preventDefault();
$('#rules').tab('show'); // or $('#rules').click();
});
谢谢@Dmonix。正是我在找什么。 – jfrosty 2013-04-08 19:47:08
我想知道,如果我这样做超过1个选项卡...有没有一种方法可以结合点击功能代码,或者我必须为每个选项卡写出一个? – jfrosty 2013-04-18 19:21:37