javascript - 引导链接到带有 url 的选项卡

Question

我正在使用引导程序 3，并且在将 url 链接到特定选项卡时遇到了一些问题，面板发生了变化，但激活的选项卡没有。所以我希望行<a href="#tab2" data-toggle="tab">link</a>, 转到 tab2，但它只转到 tab2 的面板，它不会激活选项卡。

这是html：

<div class="tabbable">
 <ul class="nav nav-tabs">
  <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
  <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
 </ul>

 <div class="tab-content">
  <div class="tab-pane active" id="tab1">
     <p><a href="#tab2" data-toggle="tab">link</a>.</p>
  </div>

  <div class="tab-pane" id="tab2">
     <p> I'm in Section 2.</p>
  </div>

 <div class="tab-pane" id="tab3">
   <p>Howdy, I'm in Section 3 </p>
  </div>
 </div>
</div>

您可以在此链接http://bootply.com/90412中对此进行测试

Answer 1

为了激活选项卡，您可以使用 jQuery 插件，如bootstrap所示。因此，您可以将这段 jQuery 代码添加到您的程序中以启用该选项卡：

$(function () {
    $('#tab1 a').click(function (e) {
        e.preventDefault();
        $('a[href="' + $(this).attr('href') + '"]').tab('show');
    })
});

您可以查看此链接：更新的代码

Answer 2

选项卡的激活取决于 ul 结构。在您的示例情况下，您可以通过添加到文档的末尾（在 Boostrap 的 Javascript 之后）覆盖插件的点击事件：

$(function(){
    $(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
    e.preventDefault()
    if($(this).parent().prop('tagName')!=='LI')
    {

        $('ul.nav li a[href="' + $(this).attr('href') + '"]').tab('show');
    }   
    else
    {
        $(this).tab('show')
    }
  })
});

参考：使用 jQuery 获取元素类型

注意：在这种情况下也可以使用较短的版本：

$(function(){
    $(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
    e.preventDefault()
    $('ul.nav li a[href="' + $(this).attr('href') + '"]').tab('show');
 })
 });

Answer 3

就像 Rohitha 的回答一样，但更笼统一些：

$(function () {
  $('a.link-to-tab').click(function (e) {
    e.preventDefault();
    $('a[href="' + $(this).attr('href') + '"]').tab('show');
  })
});

适用于任何带有class="link-to-tab"和要显示的选项卡 ID 的 href 的锚标记。例如，<a class="link-to-tab" href="#tab2">。