在页面重新加载之后,如何使用twitter引导保持当前选项卡处于活动状态?

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

这是怎么做的?

我目前打电话给标签看起来像这样:

<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来pipe理。 这是一个快速和肮脏的解决scheme,可以大大改善,但可能会给你一个起点:

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

得到这个工作使用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'); } }); 

所有其他答案是正确的。 这个答案会考虑到在一个页面上可能有多个ul.nav.nav-pills或者ul.nav.nav-tabs 。 在这种情况下,以前的答案将失败。

仍然使用localStorage但使用string化的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。 谢谢阿兰

为了最好的select,使用这种技术:

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

我更喜欢将选定的选项卡存储在窗口的哈希值中。 这也可以发送链接给同事,谁看到“相同”的页面。 诀窍是当另一个选项卡被选中时,改变位置的散列。 如果你已经在你的页面中使用了#,那么可能是散列标签必须被分割。 在我的应用程序中,我使用“:”作为散列值分隔符。

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

要防止页面在第一个选项卡上闪烁,然后是由cookie保存的选项卡(在第一个TAB中默认情况下确定该类为“活动”时发生这种情况)

删除标签和窗格的类“活动”,如:

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

想要淡化效果? @ Oktav的代码的更新版本:

  1. 对于Bootstrap 3
  2. 在li和tab的div上设置类,使淡入淡出正常。 请注意,所有的内容divs需要class="tab-pane fade"

码:

 // See http://stackoverflow.com/a/16984739/64904 // Updated by Larry to setup for fading $(function() { var json, tabsState; $('a[data-toggle="pill"], a[data-toggle="tab"]').on('shown.bs.tab', 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) { var a_el = $("#" + containerId + " a[href=" + href + "]"); $(a_el).parent().addClass("active"); $(href).addClass("active in"); return $(a_el).tab('show'); }); $("ul.nav.nav-pills, ul.nav.nav-tabs").each(function() { var $this = $(this); if (!json[$this.attr("id")]) { var a_el = $this.find("a[data-toggle=tab]:first, a[data-toggle=pill]:first"), href = $(a_el).attr('href'); $(a_el).parent().addClass("active"); $(href).addClass("active in"); return $(a_el).tab("show"); } }); }); 

我有多个页面的标签,localStorage也保留了前一页的lastTab,所以对于下一个页面,因为它有前一页的lastTab存储,所以在这里没有find任何匹配的标签,所以没有显示任何内容。 我这样修改它。

 $(document).ready(function(){ //console.log($('a[data-toggle="tab"]:first').tab('show')) $('a[data-toggle="tab"]').on('shown.bs.tab', function () { //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 ($('a[href=' + lastTab + ']').length > 0) { $('a[href=' + lastTab + ']').tab('show'); } else { // Set the first tab if cookie do not exist $('a[data-toggle="tab"]:first').tab('show'); } }) 

编辑:我注意到,我将不得不为不同的页面有不同的lastTabvariables名称,否则,他们将始终覆盖对方。 例如lastTab_klantenlastTab_bestellingen等等,用于两个不同的页面klantenbestellingen都具有显示在标签中的数据。

 $(document).ready(function(){ //console.log($('a[data-toggle="tab"]:first').tab('show')) $('a[data-toggle="tab"]').on('shown.bs.tab', function () { //save the latest tab; use cookies if you like 'em better: localStorage.setItem('lastTab_klanten', $(this).attr('href')); }); //go to the latest tab, if it exists: var lastTab_klanten = localStorage.getItem('lastTab_klanten'); if (lastTab_klanten) { $('a[href=' + lastTab_klanten + ']').tab('show'); } else { // Set the first tab if cookie do not exist $('a[data-toggle="tab"]:first').tab('show'); } }) 

我使用与@dgabriel类似的解决scheme,在这种情况下,链接<a>不需要id ,它根据位置标识当前选项卡。

 $(function() { $('a[data-toggle="tab"]').on('shown', function (e) { var indexTab = $('a[data-toggle="tab"]').index($(this)); // this: current tab anchor localStorage.setItem('lastVisitedTabIndex', indexTab); }); //go to the latest tab, if it exists: var lastIndexTab = localStorage.getItem('lastVisitedTabIndex'); if (lastIndexTab) { $('a[data-toggle="tab"]:eq(' + lastIndexTab + ')').tab('show'); } }); 

我build议以下更改

  1. 使用像amplify.store这样的插件,它提供了一个crossbrowser / crossplatform本地存储API,内置回退。

  2. 定位需要保存的标签,如$('#div a[data-toggle="tab"]')以便将此function扩展到存在于同一页面上的多个标签容器。

  3. 使用唯一的标识符(url ??)保存和恢复多个页面上的最后使用的标签。


 $(function() { $('#div a[data-toggle="tab"]').on('shown', function (e) { amplify.store(window.location.hostname+'last_used_tab', $(this).attr('href')); }); var lastTab = amplify.store(window.location.hostname+'last_used_tab'); if (lastTab) { $("#div a[href="+ lastTab +"]").tab('show'); } }); 

无本地存储的简单解决scheme

 $(".nav-tabs a").on("click", function() { location.hash = $(this).attr("href"); }); 

服务器端的方法。 确保所有html元素都有class =“”,如果没有指定,或者您将需要处理空值。

  private void ActiveTab(HtmlGenericControl activeContent, HtmlGenericControl activeTabStrip) { if (activeContent != null && activeTabStrip != null) { // Remove active from content Content1.Attributes["class"] = Content1.Attributes["class"].Replace("active", ""); Content2.Attributes["class"] = Content2.Attributes["class"].Replace("active", ""); Content3.Attributes["class"] = Content3.Attributes["class"].Replace("active", ""); // Remove active from tab strip tabStrip1.Attributes["class"] = tabStrip1.Attributes["class"].Replace("active", ""); tabStrip2.Attributes["class"] = tabStrip2.Attributes["class"].Replace("active", ""); tabStrip3.Attributes["class"] = tabStrip3.Attributes["class"].Replace("active", ""); // Set only active activeContent.Attributes["class"] = activeContent.Attributes["class"] + " active"; activeTabStrip.Attributes["class"] = activeTabStrip.Attributes["class"] + " active"; } } 

如果您想在第一次input页面时显示第一个标签,请使用以下代码:

  <script type="text/javascript"> function invokeMeMaster() { var chkPostBack = '<%= Page.IsPostBack ? "true" : "false" %>'; if (chkPostBack == 'false') { $(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')); }); }); } else { $(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'); } }); } } window.onload = function() { invokeMeMaster(); }; </script> 

这里是我所做的与Bootstrap 3jQuery 一起工作的片段,以及包含不同选项卡的不同URL它不支持每个页面多个标签,但是如果你需要这个function,它应该是一个简单的修改。

 /** * Handles 'Bootstrap' package. * * @namespace bootstrap_ */ /** * @var {String} */ var bootstrap_uri_to_tab_key = 'bootstrap_uri_to_tab'; /** * @return {String} */ function bootstrap_get_uri() { return window.location.href; } /** * @return {Object} */ function bootstrap_load_tab_data() { var uriToTab = localStorage.getItem(bootstrap_uri_to_tab_key); if (uriToTab) { try { uriToTab = JSON.parse(uriToTab); if (typeof uriToTab != 'object') { uriToTab = {}; } } catch (err) { uriToTab = {}; } } else { uriToTab = {}; } return uriToTab; } /** * @param {Object} data */ function bootstrap_save_tab_data(data) { localStorage.setItem(bootstrap_uri_to_tab_key, JSON.stringify(data)); } /** * @param {String} href */ function bootstrap_save_tab(href) { var uri = bootstrap_get_uri(); var uriToTab = bootstrap_load_tab_data(); uriToTab[uri] = href; bootstrap_save_tab_data(uriToTab); } /** * */ function bootstrap_restore_tab() { var uri = bootstrap_get_uri(); var uriToTab = bootstrap_load_tab_data(); if (uriToTab.hasOwnProperty(uri) && $('[href="' + uriToTab[uri] + '"]').length) { } else { uriToTab[uri] = $('a[data-toggle="tab"]:first').attr('href'); } if (uriToTab[uri]) { $('[href="' + uriToTab[uri] + '"]').tab('show'); } } $(document).ready(function() { if ($('.nav-tabs').length) { // 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) { bootstrap_save_tab($(this).attr('href')); }); bootstrap_restore_tab(); } }); 

$(document).ready(function(){

  if (JSON.parse(localStorage.getItem('currentClass')) == "active") { jQuery('#supporttbl').addClass('active') $('.sub-menu').css({ "display": "block" }); } $("#supporttbl").click(function () { var currentClass; if ($(this).attr('class')== "active") { currentClass = $(this).attr('class'); localStorage.setItem('currentClass', JSON.stringify(currentClass)); console.log(JSON.parse(localStorage.getItem('currentClass'))); jQuery('#supporttbl').addClass('active') $('.sub-menu').css({ "display": "block" }); } else { currentClass = "Null"; localStorage.setItem('currentClass', JSON.stringify(currentClass)); console.log(JSON.parse(localStorage.getItem('currentClass'))); jQuery('#supporttbl').removeClass('active') $('.sub-menu').css({ "display": "none" }); } }); 

});

如果页面中有多个选项卡,则可以使用以下代码

 <script type="text/javascript"> $(document).ready(function(){ $('#profileTabs').on('show.bs.tab', function(e) { localStorage.setItem('profileactiveTab', $(e.target).attr('href')); }); var profileactiveTab = localStorage.getItem('profileactiveTab'); if(profileactiveTab){ $('#profileTabs a[href="' + profileactiveTab + '"]').tab('show'); } $('#charts-tab').on('show.bs.tab', function(e) { localStorage.setItem('chartsactiveTab', $(e.target).attr('href')); }); var chartsactiveTab = localStorage.getItem('chartsactiveTab'); if(chartsactiveTab){ $('#charts-tab a[href="' + chartsactiveTab + '"]').tab('show'); } }); </script> 

这将刷新选项卡,但只有在控制器的所有内容被加载后。

 // >= angular 1.6 angular.element(function () { angular.element(document).ready(function () { //Here your view content is fully loaded !! $('li[href="' + location.hash + '"] a').tab('show'); });