0

使用最新版本的 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');
})
4

2 回答 2

0

试试这个：

$('#header a').click(function(e) {
  e.preventDefault();
   $('#rules').tab('show');  // or $('#rules').click();
});
于 2013-04-08T19:31:35.853 回答
0

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

小提琴

http://jsfiddle.net/fWV7Z/

于 2013-04-08T19:42:15.263 回答