引导程序3：保持页面上选定的选项卡刷新
我正在尝试使用Bootstrap 3 保持选定选项卡处于活动状态 。 试了一下，在这里已经提出了一些问题，但没有为我工作。 不知道我错在哪里。 这是我的代码
HTML
<!-- tabs link --> <ul class="nav nav-tabs" id="rowTab"> <li class="active"><a href="#personal-info" data-toggle="tab">Personal Information</a></li> <li><a href="#Employment-info" data-toggle="tab">Employment Information</a></li> <li><a href="#career-path" data-toggle="tab">Career Path</a></li> <li><a href="#warnings" data-toggle="tab">Warning</a></li> </ul> <!-- end: tabs link --> <div class="tab-content"> <div class="tab-pane active" id="personal-info"> tab data here... </div> <div class="tab-pane" id="Employment-info"> tab data here... </div> <div class="tab-pane" id="career-path"> tab data here... </div> <div class="tab-pane" id="warnings"> tab data here... </div> </div> Javascript ：
// tab $('#rowTab a:first').tab('show'); //for bootstrap 3 use 'shown.bs.tab' instead of '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('selectedTab', $(e.target).attr('id')); }); //go to the latest tab, if it exists: var selectedTab = localStorage.getItem('selectedTab'); if (selectedTab) { $('#'+selectedTab).tab('show'); }
我更喜欢将选定的选项卡存储在窗口的哈希值中。 这也可以发送链接给同事，谁看到“相同”的页面。 诀窍是当另一个选项卡被选中时，改变位置的散列。 如果你已经在你的页面中使用了＃，那么可能是散列标签必须被分割。 在我的应用程序中，我使用“：”作为散列值分隔符。
<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>
JavaScript，必须在上面的<script>...</script>部分中embedded。
$('#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');
这是我尝试过的最好的一个：
$(document).ready(function() { if (location.hash) { $("a[href='" + location.hash + "']").tab("show"); } $(document.body).on("click", "a[data-toggle]", function(event) { location.hash = this.getAttribute("href"); }); }); $(window).on("popstate", function() { var anchor = location.hash || $("a[data-toggle='tab']").first().attr("href"); $("a[href='" + anchor + "']").tab("show"); });
他人之间的混合答案：
- 没有点击跳跃
- 保存位置哈希
- 保存在localStorage（例如：用于表单提交）
-
只需复制和粘贴;）
if (location.hash) { $('a[href=\'' + location.hash + '\']').tab('show'); } var activeTab = localStorage.getItem('activeTab'); if (activeTab) { $('a[href="' + activeTab + '"]').tab('show'); } $('body').on('click', 'a[data-toggle=\'tab\']', function (e) { e.preventDefault() var tab_name = this.getAttribute('href') if (history.pushState) { history.pushState(null, null, tab_name) } else { location.hash = tab_name } localStorage.setItem('activeTab', tab_name) $(this).tab('show'); return false; }); $(window).on('popstate', function () { var anchor = location.hash || $('a[data-toggle=\'tab\']').first().attr('href'); $('a[href=\'' + anchor + '\']').tab('show'); });
这一个使用HTML5 localStorage存储活动选项卡
$('a[data-toggle="tab"]').on('show.bs.tab', function(e) { localStorage.setItem('activeTab', $(e.target).attr('href')); }); var activeTab = localStorage.getItem('activeTab'); if (activeTab) { $('#navtab-container a[href="' + activeTab + '"]').tab('show'); }
ref： http : //www.tutorialrepublic.com/faq/how-to-keep-the-current-tab-active-on-page-reload-in-bootstrap.php
哈维的代码几乎完全正常工作。 但是，当导航到另一个页面，提交表单，然后被redirect到页面与我的标签没有加载保存的标签。
localStorage来救援（稍微改变Nguyen的代码）：
$('a[data-toggle="tab"]').click(function (e) { e.preventDefault(); $(this).tab('show'); }); $('a[data-toggle="tab"]').on("shown.bs.tab", function (e) { var id = $(e.target).attr("href"); localStorage.setItem('selectedTab', id) }); var selectedTab = localStorage.getItem('selectedTab'); if (selectedTab != null) { $('a[data-toggle="tab"][href="' + selectedTab + '"]').tab('show'); }
根据XaviMartínez和koppor提供的答案，我提出了一个使用url hash或localStorage的解决scheme，具体取决于后者的可用性：
function rememberTabSelection(tabPaneSelector, useHash) { var key = 'selectedTabFor' + tabPaneSelector; if(get(key)) $(tabPaneSelector).find('a[href=' + get(key) + ']').tab('show'); $(tabPaneSelector).on("click", 'a[data-toggle]', function(event) { set(key, this.getAttribute('href')); }); function get(key) { return useHash ? location.hash: localStorage.getItem(key); } function set(key, value){ if(useHash) location.hash = value; else localStorage.setItem(key, value); } }
用法：
$(document).ready(function () { rememberTabSelection('#rowTab', !localStorage); // Do Work... });
它跟不上后退button，就像哈维·马丁内斯的解决scheme一样。
由于我不能评论，我从上面复制了答案，这真的帮了我。 但我改变了它的工作与Cookie而不是#id，所以我想分享改变。 这使得可以存储活动选项卡的时间不仅仅是一次刷新（例如，多次redirect），或者当已经使用了id并且你不想实现koppors split方法。
<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); $.cookie('activeTab', id); }); // on load of the page: switch to the currently selected tab var hash = $.cookie('activeTab'); if (hash != null) { $('#myTab a[href="#' + hash + '"]').tab('show'); } </script>
我的代码，它为我工作，我使用localStorage HTML5
$('#tabHistory a').click(function(e) { e.preventDefault(); $(this).tab('show'); }); $("ul.nav-tabs#tabHistory > li > a").on("shown.bs.tab", function(e) { var id = $(e.target).attr("href"); localStorage.setItem('selectedTab', id) }); var selectedTab = localStorage.getItem('selectedTab'); $('#tabHistory a[href="' + selectedTab + '"]').tab('show');
我尝试了XaviMartínez提供的代码。 它的工作，但不是为IE7。 问题是 – 标签不引用任何相关的内容。
所以，我更喜欢这个代码来解决这个问题。
function pageLoad() { $(document).ready(function() { var tabCookieName = "ui-tabs-1"; //cookie name var location = $.cookie(tabCookieName); //take tab's href if (location) { $('#Tabs a[href="' + location + '"]').tab('show'); //activate tab } $('#Tabs a').click(function(e) { e.preventDefault() $(this).tab('show') }) //when content is alredy shown - event activate $('#Tabs a').on('shown.bs.tab', function(e) { location = e.target.hash; // take current href $.cookie(tabCookieName, location, { path: '/' }); //write href in cookie }) }); };
感谢分享。
通过阅读所有的解决scheme。 我想出了一个解决scheme，使用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'); } });
使用HTML5我煮了这一个：
页面上的某些位置：
<h2 id="heading" data-activetab="@ViewBag.activetab">Some random text</h2>
viewbag应该只包含页面/元素的id，例如：“testing”
我创build了一个site.js并在页面上添加了脚本：
/// <reference path="../jquery-2.1.0.js" /> $(document).ready( function() { var setactive = $("#heading").data("activetab"); var a = $('#' + setactive).addClass("active"); } )
现在，您只需将您的ID添加到导航栏即可。 例如。：
<ul class="nav navbar-nav"> <li **id="testing" **> @Html.ActionLink("Lalala", "MyAction", "MyController") </li> </ul>
所有的冰雹数据属性:)
除了哈维·马丁内斯的回答，避免点击跳跃
避免跳跃
$(document).ready(function(){ // show active tab if(location.hash) { $('a[href=' + location.hash + ']').tab('show'); } // set hash on click without jumb $(document.body).on("click", "a[data-toggle]", function(e) { e.preventDefault(); if(history.pushState) { history.pushState(null, null, this.getAttribute("href")); } else { location.hash = this.getAttribute("href"); } $('a[href=' + location.hash + ']').tab('show'); return false; }); }); // set hash on popstate $(window).on('popstate', function() { var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href"); $('a[href=' + anchor + ']').tab('show'); });
嵌套选项卡
用“_”字符作为分隔符来实现
$(document).ready(function(){ // show active tab if(location.hash) { var tabs = location.hash.substring(1).split('_'); $.each(tabs,function(n){ $('a[href=#' + tabs[n] + ']').tab('show'); }); $('a[href=' + location.hash + ']').tab('show'); } // set hash on click without jumb $(document.body).on("click", "a[data-toggle]", function(e) { e.preventDefault(); if(history.pushState) { history.pushState(null, null, this.getAttribute("href")); } else { location.hash = this.getAttribute("href"); } var tabs = location.hash.substring(1).split('_'); //console.log(tabs); $.each(tabs,function(n){ $('a[href=#' + tabs[n] + ']').tab('show'); }); $('a[href=' + location.hash + ']').tab('show'); return false; }); }); // set hash on popstate $(window).on('popstate', function() { var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href"); var tabs = anchor.substring(1).split('_'); $.each(tabs,function(n){ $('a[href=#' + tabs[n] + ']').tab('show'); }); $('a[href=' + anchor + ']').tab('show'); });
我试过这个，它的工作原理:(请用您正在使用的药片或标签replace这个 ）
jQuery(document).ready(function() { jQuery('a[data-toggle="pill"]').on('show.bs.tab', function(e) { localStorage.setItem('activeTab', jQuery(e.target).attr('href')); }); // Here, save the index to which the tab corresponds. You can see it // in the chrome dev tool. var activeTab = localStorage.getItem('activeTab'); // In the console you will be shown the tab where you made the last // click and the save to "activeTab". I leave the console for you to // see. And when you refresh the browser, the last one where you // clicked will be active. console.log(activeTab); if (activeTab) { jQuery('a[href="' + activeTab + '"]').tab('show'); } });
我希望这会有所帮助。
结果如下： https ： //jsfiddle.net/neilbannet/ego1ncr5/5/
