Bootstrap 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');}
3 回答
MMTTMM
TA貢獻1869條經驗 獲得超4個贊
這是我嘗試過的最好的一個：
$(document).ready(function() {
if (location.hash) {
$("a[href='" + location.hash + "']").tab("show");
}
$(document.body).on("click", "a[data-toggle='tab']", 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");});
繁星點點滴滴
TA貢獻1803條經驗 獲得超3個贊
其他人之間的混合回答：
沒有跳轉點擊
保存位置哈希
保存在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');});
- 3 回答
- 0 關注
- 1560 瀏覽
添加回答
舉報
0/150
提交
取消