在 bootstrap 3 中使用 onclick 显示带有外部链接的选项卡 [英] show tab with external link with onclick in bootstrap 3

问题描述

我想使用如下链接链接到引导程序 3.2.0 选项卡:

I want to link to a bootstrap 3.2.0 tab with a link like this:

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

谢谢！！

推荐答案

这里有个评论帖:https://github.com/twbs/bootstrap/issues/2415 没有一个解决方案能像这样顺利运行.

There is a comment thread here: https://github.com/twbs/bootstrap/issues/2415 and NONE of the solutions work as smoothly as this.

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

此解决方案使用常规 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 文件.

You put this js AFTER your bootstrap.js inside the functions where you call the tooltip or popover (for example). I have a bootstrap-initializations.js file loaded after bootstrap.min.js in my document.

用法:与链接到锚点的用法相同:

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

这篇关于在 bootstrap 3 中使用 onclick 显示带有外部链接的选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！