jquery - 在 Bootstrap 3 中使用 onclick 显示带有外部链接的选项卡

Question

我想通过如下链接链接到 bootstrap 3.2.0 选项卡:

<a href="#tab_i_want_to_link" onclick="something()">Tab name</a>

谢谢!!

Answer 1

这里有一个评论线程:https://github.com/twbs/bootstrap/issues/2415没有任何解决方案能像这样顺利工作。

来源:http://timforsythe.com/blog/hashtabs/

演示:https://jsbin.com/quvelo/2/

此解决方案通过常规 URL 链接到外部、内部以及您想要的任何位置的选项卡。

  $(window).load(function() { 

    // cache the id
    var navbox = $('.nav-tabs');

    // activate tab on click
    navbox.on('click', 'a', function (e) {
      var $this = $(this);
      // prevent the Default behavior
      e.preventDefault();
      // send the hash to the address bar
      window.location.hash = $this.attr('href');
      // activate the clicked tab
      $this.tab('show');
    });

    // will show tab based on hash
    function refreshHash() {
      navbox.find('a[href="'+window.location.hash+'"]').tab('show');
    }

    // show tab if hash changes in address bar
    $(window).bind('hashchange', refreshHash);
    
    // read has from address bar and show it
    if(window.location.hash) {
      // show tab on load
      refreshHash();
    }
    
});

您可以将此 js 放在调用工具提示或弹出框(例如)的函数内的 bootstrap.js 之后。我在文档中的 bootstrap.min.js 之后加载了一个 bootstrap-initializations.js 文件。

用法:与链接到 anchor 相同:

<a href="mypage.html#tabID">Link</a>