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

问题描述

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

I'm currently using tabs with Twitter Bootstrap and want to select the same tab after a user has posted data and the page reloads.

这是如何完成的？

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

My current call to inti the tabs looks like this:

<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>

推荐答案

您必须使用localStorage或cookies来管理那。这是一个快速而肮脏的解决方案，可以大大改进，但可能会给你一个起点：

You'll have to use localStorage or cookies to manage that. Here's a quick and dirty solution that can be vastly improved, but may give you a starting point:

$(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');
    }
});

这篇关于如何在页面重新加载后使用twitter bootstrap保持当前选项卡处于活动状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！