如何在页面重新加载后使用twitter bootstrap保持当前选项卡处于活动状态？

Question

我目前正在使用Twitter Bootstrap的标签,并希望在用户发布数据和页面重新加载后选择相同的标签.

这是怎么做到的？

我当前对标签的调用如下所示:

<script type="text/javascript">

$(document).ready(function() {

    $('#profileTabs a:first').tab('show');
});
</script>

我的标签:

<ul id="profileTabs" class="nav nav-tabs">
    <li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#about" data-toggle="tab">About Me</a></li>
    <li><a href="#match" data-toggle="tab">My Match</a></li>
</ul>

Answer 1

您必须使用localStorage或cookie来管理它.这是一个快速而肮脏的解决方案,可以大大改进,但可能会给你一个起点:

$(function() { 
    // for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use 'shown' in the next line
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        // save the latest tab; use cookies if you like 'em better:
        localStorage.setItem('lastTab', $(this).attr('href'));
    });

    // go to the latest tab, if it exists:
    var lastTab = localStorage.getItem('lastTab');
    if (lastTab) {
        $('[href="' + lastTab + '"]').tab('show');
    }
});

Answer 2

这可以使用cookie工作,并从任何其他选项卡和选项卡窗格中删除"活动"类...并将"活动"类添加到当前选项卡和选项卡窗格.

我确信有更好的方法可以做到这一点,但这似乎适用于这种情况.

需要jQuery cookie插件.

$(function() { 
  $('a[data-toggle="tab"]').on('shown', function(e){
    //save the latest tab using a cookie:
    $.cookie('last_tab', $(e.target).attr('href'));
  });

  //activate latest tab, if it exists:
  var lastTab = $.cookie('last_tab');
  if (lastTab) {
      $('ul.nav-tabs').children().removeClass('active');
      $('a[href='+ lastTab +']').parents('li:first').addClass('active');
      $('div.tab-content').children().removeClass('active');
      $(lastTab).addClass('active');
  }
});

Answer 3

所有其他答案都是正确的.这个答案将考虑到一个人可能有多个ul.nav.nav-pills或ul.nav.nav-tabs在同一页面上的事实.在这种情况下,先前的答案将失败.

仍然使用localStorage但使用字符串JSON作为值.这是代码:

$(function() {
  var json, tabsState;
  $('a[data-toggle="pill"], a[data-toggle="tab"]').on('shown', function(e) {
    var href, json, parentId, tabsState;

    tabsState = localStorage.getItem("tabs-state");
    json = JSON.parse(tabsState || "{}");
    parentId = $(e.target).parents("ul.nav.nav-pills, ul.nav.nav-tabs").attr("id");
    href = $(e.target).attr('href');
    json[parentId] = href;

    return localStorage.setItem("tabs-state", JSON.stringify(json));
  });

  tabsState = localStorage.getItem("tabs-state");
  json = JSON.parse(tabsState || "{}");

  $.each(json, function(containerId, href) {
    return $("#" + containerId + " a[href=" + href + "]").tab('show');
  });

  $("ul.nav.nav-pills, ul.nav.nav-tabs").each(function() {
    var $this = $(this);
    if (!json[$this.attr("id")]) {
      return $this.find("a[data-toggle=tab]:first, a[data-toggle=pill]:first").tab("show");
    }
  });
});

这个位可以在所有页面上的整个应用程序中使用,并且适用于标签和药片.此外,请确保默认情况下标签或药丸未处于活动状态,否则您将在页面加载时看到闪烁效果.

重要提示:确保父母ul有一个id.谢谢阿兰

Answer 4

要获得最佳选择,请使用以下技术:

$(function() { 
  //for bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line
  $('a[data-toggle="tab"]').on('click', function (e) {
    //save the latest tab; use cookies if you like 'em better:
    localStorage.setItem('lastTab', $(e.target).attr('href'));
  });

  //go to the latest tab, if it exists:
  var lastTab = localStorage.getItem('lastTab');

  if (lastTab) {
    $('a[href="'+lastTab+'"]').click();
  }
});

Answer 5

我更喜欢将选定的选项卡存储在窗口的哈希值中.这样也可以向同事发送链接,而不是看到"相同"的页面.诀窍是在选择另一个选项卡时更改位置的哈希值.如果您已在页面中使用#,则可能必须拆分散列标记.在我的应用程序中,我使用":"作为哈希值分隔符.

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">home</div>
    <div class="tab-pane" id="profile">profile</div>
    <div class="tab-pane" id="messages">messages</div>
    <div class="tab-pane" id="settings">settings</div>
</div>

<script>
    $('#myTab a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    });

    // store the currently selected tab in the hash value
    $("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
        var id = $(e.target).attr("href").substr(1);
        window.location.hash = id;
    });

    // on load of the page: switch to the currently selected tab
    var hash = window.location.hash;
    $('#myTab a[href="' + hash + '"]').tab('show');
</script>

Answer 6

防止页面在第一个选项卡上闪烁,然后阻止cookie保存的选项卡(当您在第一个选项卡中默认确定"活动"类时会发生这种情况)

删除选项卡和窗格的"活动"类,如:

<ul class="nav nav-tabs">
<div id="p1" class="tab-pane">

将下面的脚本设置为默认设置第一个选项卡(需要jQuery cookie插件)

    $(function() { 
        $('a[data-toggle="tab"]').on('shown', function(e){
            //save the latest tab using a cookie:
            $.cookie('last_tab', $(e.target).attr('href'));
        });
        //activate latest tab, if it exists:
        var lastTab = $.cookie('last_tab');
        if (lastTab) {
            $('a[href=' + lastTab + ']').tab('show');
        }
        else
        {
            // Set the first tab if cookie do not exist
            $('a[data-toggle="tab"]:first').tab('show');
        }
    });