Twitter Bootstrap选项卡:转到页面重新加载或超链接上的“特定”选项卡


358

我正在开发一个网页,其中使用Twitter的Bootstrap Framework及其Bootstrap Tabs JS。除了一些小问题外,它的工作效果非常好,其中一个小问题是我不知道如何直接从外部链接转到特定选项卡。例如:

<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>

单击外部页面上的链接时,应分别转到“主页”选项卡和“注释”选项卡


49
希望这是内置的!
戴蒙2012年

5
这个问题也已经在这里提出:github.com/twitter/bootstrap/issues/2415(并在那里有一些解决方案)。
Ztyx


1
引导程序问题的更新链接为github.com/twbs/bootstrap/issues/2415
bmihelac

3
解决此问题的插件:github.com/timabell/jquery.stickytabs
Tim Abell

Answers:


603

这是我对问题的解决方案,也许有点晚了。但这可能会帮助其他人:

// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
})

83
我还要再增加1行window.scrollTo(0, 0);,以确保“窗口”始终滚动到顶部
TrungLê2012年

1
$('。nav-tabs a [href * =#'+ url.split('#')[1] +']')。tab('show'); //加上*会更安全,因为否则它只会匹配第一个#...
mattangriffel

1
对我有用的在线服务:window.location.hash && $('li a [href =“'+ window.location.hash +'”]')。tab('show')。trigger(“ click”);
Dean Meehan 2014年

10
这是Bootstrap 3的演示:bootply.com/render/VQqzOawoYc#tab2源代码
Zim

2
将jquery从1.09升级到1.11后,出现此错误:Syntax error, unrecognized expression: .nav-tabs a[href=#tab-2]。使用stackoverflow.com/questions/12131273/…
Pietro Z.16年

213

更新

对于Bootstrap 3,更改.on('shown', ...).on('shown.bs.tab', ....)


这基于@dubbe答案和此SO接受的答案。它可以解决window.scrollTo(0,0)无法正常工作的问题。问题在于,当替换显示的选项卡上的url哈希时,浏览器将滚动到该哈希,因为它是页面上的一个元素。要解决此问题,请添加前缀,以使哈希不引用实际的页面元素

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
    $('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

使用例

如果您的标签窗格具有id =“ mytab”,则需要这样放置链接:

<a href="yoursite.com/#tab_mytab">Go to Specific Tab </a>

1
是否有一种简单的方法可以引用位于特定选项卡下的书签?我的页面上有五个标签,在这些标签下,我有许多书签。我想要使​​这些书签可从选项卡外部链接。
nize 2013年

@nize如果您使用您要尝试的方法创建一个jsfiddle,我将尝试看看。
flynfish

1
这是Bootstrap 3的Bootlpy演示:bootply.com/render/VQqzOawoYc#tab2源代码
Zim

上面的示例缺少href上的双引号。第5行应为:$('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
Ponyboy '16

对我有用,除了我必须删除“ yoursite.com/anotherpage/#tab_mytab”中的最后一个正斜杠(在#之前),否则它会严重破坏页面加载。
亚历山大

52

您可以click在相应的标签链接上触发事件:

$(document).ready(function(){

  if(window.location.hash != "") {
      $('a[href="' + window.location.hash + '"]').click()
  }

});

谢谢你的提示!这很好,但有一个小问题。刷新页面,不会将其带到正确的选项卡。按Ctrl + F5即可。我将代码修改为以下内容:`$(document).ready(function(){function getUrlVars(){var vars = {}; var parts = window.location.href.replace(/ [?&] +([ ^ =&] +)=([[^&] *)/ gi,function(m,key,value){vars [key] = value;}); return vars;} var action = getUrlVars()[“ action” ]; if(action!=“”){$('a [href =“#'+ action +'”]')。click()};}); `
mraliks 2011年

44

这是防止滚动的dubbe解决方案的改进实现。

// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href="#'+url.split('#')[1]+'"]').tab('show') ;
} 

// With HTML5 history API, we can easily prevent scrolling!
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    if(history.pushState) {
        history.pushState(null, null, e.target.hash); 
    } else {
        window.location.hash = e.target.hash; //Polyfill for old browsers
    }
})

21

尽管提供的JavaScript解决方案可能有效,但我采用了稍微不同的方法,不需要其他JavaScript,但在您看来需要逻辑。您使用标准URL参数创建链接,例如:

<a href = "http://link.to.yourpage?activeTab=home">My Link</a>

然后,您只需检测activeTab的值即可在适当的位置写入“ class =“ active” <li>

伪代码(相应地以您的语言实现)。注意如果此示例中未提供任何参数,则将“主页”选项卡设置为默认活动选项。

$activetabhome = (params.activeTab is null or params.activeTab == 'home') ? 'class="active"' : '';
$activetabprofile = (params.activeTab == 'profile') ? 'class="active"' : '';

<li $activetabhome><a href="#home">Home</a></li>
<li $activetabprofile><a href="#profile">Profile</a></li>

由于一个简单的原因,我更喜欢您的解决方案,而不是JS解决方案,因为JS location.hash会跳转到ID,这会导致光标的位置上下移动。
TrungLê2012年

我更喜欢这种解决方案。实际上,我通过相应地设置活动类为选项卡和重新生成的视图创建了新路线。这避免了页面大小调整,URL哈希和页面滚动在一起的麻烦。
Vijay Meena

10

我不是if ... else的忠实拥护者;所以我采取了一种更简单的方法。

$(document).ready(function(event) {
    $('ul.nav.nav-tabs a:first').tab('show'); // Select first tab
    $('ul.nav.nav-tabs a[href="'+ window.location.hash+ '"]').tab('show'); // Select tab by name if provided in location hash
    $('ul.nav.nav-tabs a[data-toggle="tab"]').on('shown', function (event) {    // Update the location hash to current tab
        window.location.hash= event.target.hash;
    })
});
  1. 选择一个默认标签(通常是第一个)
  2. 切换到选项卡(如果确实存在这样的元素;让jQuery处理);如果指定了错误的哈希,则不会发生任何事情
  3. [可选]如果手动选择了另一个选项卡,则更新哈希

不解决滚动到请求的哈希值的问题;但是应该吗?



8

这可以在Bootstrap 3中工作,并且还通过集成GarciaWebDev的答案来改善dubbe和flynfish的2个最佳答案(这允许在哈希之后使用url参数,并且直接来自github问题跟踪器上的Bootstrap作者):

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";

if (hash) {
    hash = hash.replace(prefix,'');
    var hashPieces = hash.split('?');
    activeTab = $('.nav-tabs a[href=' + hashPieces[0] + ']');
    activeTab && activeTab.tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

1
这在Bootstrap 3中不起作用,'shown'应该'shown.bs.tab'根据docs:getbootstrap.com/javascript/#tabs-events进行操作。我对为什么感到困惑,但是当我尝试编辑您的帖子时,它被拒绝了……
YPCrumble 2015年

6

该代码根据#hash选择正确的选项卡,并在单击选项卡时添加正确的#hash。(这使用jQuery)

在Coffeescript中:

$(document).ready ->
    if location.hash != ''
        $('a[href="'+location.hash+'"]').tab('show')

    $('a[data-toggle="tab"]').on 'shown', (e) ->
        location.hash = $(e.target).attr('href').substr(1)

或在JS中:

$(document).ready(function() {
    if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');
    return $('a[data-toggle="tab"]').on('shown', function(e) {
      return location.hash = $(e.target).attr('href').substr(1);
    });
});

确保在jquery加载后将其放置。我把它放在页面中间(这是插入它进行测试的简单位置),但是它不起作用。我加载jquery后放它很好。
罗恩(Ron)

6

以Demircan Celebi的解决方案为基础;我希望在修改URL时打开选项卡,然后打开选项卡,而不必从服务器重新加载页面。

<script type="text/javascript">
    $(function() {
        openTabHash(); // for the initial page load
        window.addEventListener("hashchange", openTabHash, false); // for later changes to url
    });


    function openTabHash()
    {
        console.log('openTabHash');
        // Javascript to enable link to tab
        var url = document.location.toString();
        if (url.match('#')) {
            $('.nav-tabs a[href="#'+url.split('#')[1]+'"]').tab('show') ;
        } 

        // With HTML5 history API, we can easily prevent scrolling!
        $('.nav-tabs a').on('shown.bs.tab', function (e) {
            if(history.pushState) {
                history.pushState(null, null, e.target.hash); 
            } else {
                window.location.hash = e.target.hash; //Polyfill for old browsers
            }
        })
    }
</script>


5

我用于嵌套选项卡的@flynfish + @Ztyx解决方案:

    handleTabLinks();

    function handleTabLinks() {
        if(window.location.hash == '') {
            window.location.hash = window.location.hash + '#_';
        }
        var hash = window.location.hash.split('#')[1];
        var prefix = '_';
        var hpieces = hash.split('/');
        for (var i=0;i<hpieces.length;i++) {
            var domelid = hpieces[i].replace(prefix,'');
            var domitem = $('a[href=#' + domelid + '][data-toggle=tab]');
            if (domitem.length > 0) {
                domitem.tab('show');
            }
        }
        $('a[data-toggle=tab]').on('shown', function (e) {
            if ($(this).hasClass('nested')) {
                var nested = window.location.hash.split('/');
                window.location.hash = nested[0] + '/' + e.target.hash.split('#')[1];
            } else {
                window.location.hash = e.target.hash.replace('#', '#' + prefix);
            }
        });
    }

孩子们应该有class =“ nested”


5

我想出了一个使用url哈希或localStorage的解决方案,具体取决于后者的可用性以及以下代码:

$(function(){
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
        localStorage.setItem('activeTab', $(e.target).attr('href'));
    })

    var hash = window.location.hash;
    var activeTab = localStorage.getItem('activeTab');

    if(hash){
          $('#project-tabs  a[href="' + hash + '"]').tab('show');   
    }else if (activeTab){
        $('#project-tabs a[href="' + activeTab + '"]').tab('show');
    }
});


4

尝试了以上讨论的几种方法,最终得到了以下可行的解决方案,只需将其复制并粘贴到编辑器中即可尝试。要进行测试,只需将哈希更改为收件箱,发件箱,输入网址并按Enter键即可。

<html>
    <head>
        <link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
        <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container body-content">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#inbox">Inbox</a></li>
                <li><a data-toggle="tab" href="#outbox">Outbox</a></li>
                <li><a data-toggle="tab" href="#compose">Compose</a></li>
            </ul>
            <div class="tab-content">
                <div id="inbox" class="tab-pane fade in active">
                    Inbox Content
                </div>
                <div id="outbox" class="tab-pane fade">
                    Outbox Content
                </div>
                <div id="compose" class="tab-pane fade">
                    Compose Content
                </div>
            </div>
        </div>
        <script>
            $(function () {
                var hash = window.location.hash;
                hash && $('ul.nav a[href="' + hash + '"]').tab('show');
            });
        </script>
    </body>
</html>

希望这可以节省您的时间。


3

这是我所做的,非常简单,并且只要您的标签链接具有与之关联的ID,您就可以获取href属性并将其传递给显示标签内容的函数:

<script type="text/javascript">
        jQuery(document).ready(function() {
            var hash = document.location.hash;
            var prefix = "tab_";
            if (hash) {
                var tab = jQuery(hash.replace(prefix,"")).attr('href');
                jQuery('.nav-tabs a[href='+tab+']').tab('show');
            }
        });
        </script>

然后,您可以在网址中添加哈希,例如:#tab_tab1,将从哈希本身中删除“ tab_”部分,以便将导航标签(tabid1)中实际标签链接的ID放在此之后,因此网址应类似于:www.mydomain.com/index.php#tab_tabid1。

这对我来说很完美,希望对其他人有帮助:-)


2

这是我处理嵌套选项卡的解决方案。我刚刚添加了一个功能,以检查活动选项卡是否具有要激活的父选项卡。这是功能:

function activateParentTab(tab) {
    $('.tab-pane').each(function() {
        var cur_tab = $(this);
        if ( $(this).find('#' + tab).length > 0 ) {
            $('.nav-tabs a[href=#'+ cur_tab.attr('id') +']').tab('show');
            return false;
        }
    });
}

可以这样称呼(基于@flynfish的解决方案):

var hash = document.location.hash;
var prefix = "";
if (hash) {
    $('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
    activateParentTab(hash);
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

目前,此解决方案对我来说还算不错。希望这对其他人有用;)


2

我必须对此进行一些修改才能为我工作。我正在使用Bootstrap 3和jQuery 2

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "!";
if (hash) {
    hash = hash.replace(prefix,'');
    var hashPieces = hash.split('?');
    activeTab = $('[role="tablist"] a[href=' + hashPieces[0] + ']');
    activeTab && activeTab.tab('show');
}

// Change hash for page-reload
$('[role="tablist"] a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

很好的答案,除了我必须替换“!” 带“ tab_”的前缀。否则效果很好。
koziez

2

只需在您的页面上插入以下代码:

$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');

  $('.nav-tabs a').click(function (e) {
    $(this).tab('show');
    var scrollmem = $('body').scrollTop();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });
});


1

我只是遇到了这个问题,但需要处理多个选项卡级别。该代码相当丑陋(请参见注释),但是可以完成它的工作:https : //gist.github.com/JensRantil/4721860希望其他人会发现它有用(并随时提出更好的解决方案!)。


1

结合其他答案中的香料,这是一个可以打开许多级别的嵌套选项卡的解决方案:

// opens all tabs down to the specified tab
var hash = location.hash.split('?')[0];
if(hash) {
  var $link = $('[href=' + hash + ']');
  var parents = $link.parents('.tab-pane').get();
  $(parents.reverse()).each(function() {
    $('[href=#' + this.id + ']').tab('show') ;
  });
  $link.tab('show');
}

仅适用于2层嵌套,第3层会引起问题。
尼古拉斯·汉密尔顿,

我只是在三个级别的选项卡上对此进行了测试,它似乎对我有用。您确定这不是您的实现问题吗?您遇到什么“问题”?
cweston '16

第一级和第二级中的任何选项卡都可以正常工作,但是,在第三级中,刷新页面(或提交表单)时,当页面重新打开时,其焦点将放在第二级的第一个选项卡上。
尼古拉斯·汉密尔顿

这样就可以正常工作了(我的代码中有一个小的错字),但是在错字纠正之后,只能$('.nav-tabs li a').click( function(e) { history.pushState( null, null, $(this).attr('href') );});在代码上方的javascript中使用。
尼古拉斯·汉密尔顿

1

如果对任何人都重要,则下面的代码很小,并且可以完美地工作,可以从URL获取单个哈希值并显示出来:

<script>
    window.onload = function () {
        let url = document.location.toString();
        let splitHash = url.split("#");
        document.getElementById(splitHash[1]).click();
    };
</script>

它的作用是检索ID并触发click事件。简单。


0

我这样做某事与ajax的链接#!#(例如/test.com#!#test3),但是您可以根据自己的喜好对其进行修改。

$(document).ready(function() {

       let hash = document.location.hash;
       let prefix = "!#";

       //change hash url on page reload
       if (hash) {
         $('.nav-tabs a[href=\"'+hash.replace(prefix,"")+'\"]').tab('show');
       } 

       // change hash url on switch tab
       $('.nav-tabs a').on('shown.bs.tab', function (e) {
          window.location.hash = e.target.hash.replace("#", "#" + prefix);
       });
 });

在Github上使用简单页面的示例


0

我知道这个线程很旧,但是我将在这里留下自己的实现:

$(function () {
  // some initialization code

  addTabBehavior()
})

// Initialize events and change tab on first page load.
function addTabBehavior() {
  $('.nav-tabs a').on('show.bs.tab', e => {
    window.location.hash = e.target.hash.replace('nav-', '')
  })

  $(window).on('popstate', e => {
    changeTab()
  })

  changeTab()
}

// Change the current tab and URL hash; if don't have any hash
// in URL, so activate the first tab and update the URL hash.
function changeTab() {
  const hash = getUrlHash()

  if (hash) {
    $(`.nav-tabs a[href="#nav-${hash}"]`).tab('show')
  } else {
    $('.nav-tabs a').first().tab('show')
  }
}

// Get the hash from URL. Ex: www.example.com/#tab1
function getUrlHash() {
  return window.location.hash.slice(1)
}

请注意,我在nav-导航链接中使用了类前缀。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.