我正在尝试使用 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');
}
答案 0 :(得分：173)
我更喜欢将选定的标签存储在窗口的哈希值中。这样也可以向同事发送链接，而不是看到“相同”的页面。诀窍是在选择另一个选项卡时更改位置的哈希值。如果您已在页面中使用＃，则可能需要拆分散列标记。在我的应用程序中，我使用“：”作为哈希值分隔符。
<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>部分之后嵌入上述内容。
$('#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');
答案 1 :(得分：112)
这是我尝试过的最好的一个：
$(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");
});
答案 2 :(得分：34)
其他人的回答是：
只需复制并粘贴;）
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 :(得分：14)
Xavi的代码完全正常运作。但是当导航到另一个页面，提交表单，然后被重定向到带有我的选项卡的页面时，根本没有加载保存的选项卡。
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');
}
答案 4 :(得分：10)
这个使用HTML5 localStorage来存储活动标签
$('a[data-toggle="tab"]').on('shown.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');
}
参考：http://www.tutorialrepublic.com/faq/how-to-keep-the-current-tab-active-on-page-reload-in-bootstrap.php https://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp
答案 5 :(得分：4)
基于Xavi Martínez和koppor提供的答案，我提出了一个使用url hash或localStorage的解决方案，具体取决于后者的可用性：
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...
});
与Xavi Martínez解决方案的情况一样，它没有跟上后退按钮。
答案 6 :(得分：4)
我的代码，它适用于我，我使用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');
答案 7 :(得分：4)
嗯，这已经是2018年，但我认为这比迟到更好（比如电视节目中的标题），哈哈。这里是我在论文中创建的jQuery代码。
<script type="text/javascript">
$(document).ready(function(){
$('a[data-toggle="tab"]').on('show.affectedDiv.tab', function(e) {
localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
$('#myTab a[href="' + activeTab + '"]').tab('show');
}
});
</script>
以下是bootstrap标签的代码：
<div class="affectedDiv">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#sectionA">Section A</a></li>
<li><a data-toggle="tab" href="#sectionB">Section B</a></li>
<li><a data-toggle="tab" href="#sectionC">Section C</a></li>
</ul>
<div class="tab-content">
<div id="sectionA" class="tab-pane fade in active">
<h3>Section A</h3>
<p>Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
</div>
<div id="sectionB" class="tab-pane fade">
<h3>Section B</h3>
<p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
</div>
<div id="sectionC" class="tab-pane fade">
<h3>Section C</h3>
<p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
</div>
</div>
</div>
Dont forget to call the bootstrap and other fundamental things
这里有快速代码：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
现在让我们来解释一下：
上例中的jQuery代码只是获取元素 使用jQuery显示新选项卡时的href属性值 .attr（）方法并通过HTML5将其保存在用户浏览器中 localStorage对象。以后，当用户刷新页面时 检索此数据并通过.tab（'show'）激活相关选项卡 方法
想看一些例子？这是一个给你们.. https://jsfiddle.net/Wineson123/brseabdr/
我希望我的回答可以帮助你们所有人.. Cheerio！ ：）
答案 8 :(得分：4)
我试过这个并且它有效:(请用你正在使用的药片或标签替换this）
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');
}
});
我希望它会对某人有所帮助。
答案 9 :(得分：2)
由于我无法发表评论，但我从上面复制了答案，这确实帮助了我。但是我改为使用cookies而不是#id，所以我想分享这些改动。这样可以存储活动标签的时间长于一次刷新（例如多次重定向），或者当ID已经使用且您不想实施koppors拆分方法时。
<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>
答案 10 :(得分：2)
我尝试了Xavi Martí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
})
});
};
答案 11 :(得分：1)
对于Bootstrap v4.3.1。请尝试以下：
$(document).ready(function() {
var pathname = window.location.pathname; //get the path of current page
$('.navbar-nav > li > a[href="'+pathname+'"]').parent().addClass('active');
})
答案 12 :(得分：1)
感谢分享。
阅读所有解决方案。我想出了一个使用url hash或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');
}
});
答案 13 :(得分：0)
我们使用jquery触发器来加载脚本按下按钮给我们
$（＆＃34; .class_name＆＃34）。触发器（＆＃39;单击＆＃39）;
答案 14 :(得分：0)
除了XaviMartínez的答案，避免跳转点击
避免跳跃
$(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');
});
答案 15 :(得分：0)
重新加载页面并保持预期后有一个解决方案 标签已选中。
假设在保存数据后，重定向的网址为：my_url＃tab_2
现在，通过以下脚本，您的预期选项卡将保留 地选择。
$to = abc@gmail.com;
$subject = "New good bye profile claim request";
$from = " xyz@gmail.com";
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers = "From: $from";
$message = '<html><body>';
$message .= '<h1 style="color:#f40;">Hi Jane!</h1>';
$message .= '<p style="color:#080;font-size:18px;">Will you marry me?</p>';
$message .= '</body></html>';
mail($to,$subject,$message,$headers);
答案 16 :(得分：0)
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
}
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
if(e.target.hash == "#activity"){
$('.nano').nanoScroller();
}
})
答案 17 :(得分：0)
使用html5我制作了这个：
页面上的某些位置：
<h2 id="heading" data-activetab="@ViewBag.activetab">Some random text</h2>
viewbag应该只包含页面/元素的id，例如：“testing”
我创建了一个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>
全部欢呼数据属性：）