Twitter Bootstrap - 选项卡 - URL不会更改

Question

我正在使用Twitter Bootstrap及其"标签".

我有以下代码:

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#add">add</a></li>
    <li><a data-toggle="tab" href="#edit" >edit</a></li>
    <li><a data-toggle="tab" href="#delete" >delete</a></li>
</ul>

选项卡正常工作,但URL中没有添加#add,#edit,#delete.

当我删除data-toggleURL更改,但选项卡不起作用.

对此有何解决方案？

Answer 1

试试这个代码.它根据页面加载的哈希将tab href添加到url +打开选项卡:

$(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() || $('html').scrollTop();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });
});

Answer 2

完整解决方案需要三个组件:

1. 如果URL中存在哈希,则在加载页面时显示正确的选项卡.
2. 更改选项卡时更改URL中的哈希值.
3. 当哈希值在URL(后退/前进按钮)中更改时更改选项卡,并确保第一个选项卡正确循环.

我不认为这里的任何评论,也没有接受的答案,处理所有这些情况.

由于涉及到相当多,我认为它是最小的jQuery插件:https://github.com/aidanlister/jquery-stickytabs

您可以像这样调用插件:

$('.nav-tabs').stickyTabs();

我已为此发了一篇博客文章,http://aidanlister.com/2014/03/persisting-the-tab-state-in-bootstrap/

Answer 3

使用data-toggle="tab" 要求插件处理选项卡,在执行它时调用preventDefault事件(github上的代码).

您可以使用自己的选项卡激活,并让事件通过:

$('.nav-tabs a').click(function (e) {
    // No e.preventDefault() here
    $(this).tab('show');
});

您必须删除该属性 data-toggle="tab"

如果您有疑问,请检查文档.

Answer 4

由于您的锚元素已经更改了url哈希,因此监听onhashchange事件是另一个不错的选择.正如@flori已经提到的,这种方法适用于浏览器后退按钮.

var tabs$ = $(".nav-tabs a");

$( window ).on("hashchange", function() {
    var hash = window.location.hash, // get current hash
        menu_item$ = tabs$.filter('[href="' + hash + '"]'); // get the menu element

    menu_item$.tab("show"); // call bootstrap to show the tab
}).trigger("hashchange");

最后,在定义侦听器之后触发事件也有助于在页面加载时显示正确的选项卡.