如何在页面刷新时保持选中的 Bootstrap 选项卡？

我正在尝试用 鞋带3刷新 保持选定的选项卡处于活动状态。我试过了，这里已经问过一些问题了，但是没有一个适合我的。不知道我哪里错了。这是我的密码

超文本标示语言

<!-- 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');
}
237741 次浏览
小开
最佳答案

我更喜欢将选中的选项卡存储在窗口的散列值中。这还允许向同事发送链接，后者可以查看“同一”页面。技巧是在选择另一个选项卡时更改位置的哈希值。如果您已经在页面中使用了 # ，那么可能必须拆分散列标记。在我的应用程序中，我使用“ :”作为散列值分隔符。

<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');
小开

这是我试过的最好的一个:

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

我用 html5编写了这个:

页面上的一些地方:

<h2 id="heading" data-activetab="@ViewBag.activetab">Some random text</h2>

视图包应该只包含页面/元素的 id，例如: “ test”

我创建了一个 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>

为 data 属性欢呼吧:)

小开

根据 哈维 · 马丁内斯和 科波提供的答案，我想出了一个解决方案，根据后者的可用性，使用 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...
});

它不能像 哈维 · 马丁内斯的解决方案那样跟上后退按钮的步伐。

小开

我的代码，它为我工作，我使用 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');
小开

因为我还不能评论，所以我从上面复制了答案，这真的帮了我大忙。但是我把它改为使用 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>
小开

我试了 哈维 · 马丁内斯提供的代码。它工作，但不为 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
})
});
};
小开

哈维的代码几乎完全工作了。但是，当导航到另一个页面时，提交一个表单，然后用我的选项卡重定向到该页面，根本不会加载保存的选项卡。

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

这个使用 HTML5localStorage来存储活动标签

$('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”rel = “ norefrer”> 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

小开

除了哈维 · 马丁内斯的回答避免了点击跳跃

避免跳跃

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

谢谢分享。

通过阅读所有的解决方案。我想出了一个解决方案，它使用 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');
}
});
小开

其他答案的组合:

  • 没有点击跳跃
  • 保存位置散列
  • 保存 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');
});
小开

我试过这个，它的工作: (请取代 这个与药丸或标签您正在使用)

    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/

小开

我们使用 jquery 触发器来加载一个脚本为我们按下按钮

$(“ . class _ name”) . touch (‘ click’) ;

小开

好吧，现在已经是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>

下面是引导标签的代码:

<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

here are quick codes for you:

<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将其本地保存到用户的浏览器中 稍后，当用户刷新页面时，它将 检索此数据并通过. tab (‘ show’)激活相关的选项卡 方法。

查找一些例子? 这里有一个为你们的家伙. 。 Https://jsfiddle.net/wineson123/brseabdr/

我希望我的回答能帮到你们所有人. . 再见! :)

小开

在重新加载页面并保持预期的 选中的标签。

假设在保存数据之后，重定向的 url 是: my _ url # tab _ 2

现在通过下面的脚本，预期的选项卡将保留 选定。

$(document).ready(function(){
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
$('.nav-tabs a').removeClass('active');
}
});
小开

有很多方法可以做到这一点。我想到了这一点，简短而简单。

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

对于 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');
})
小开

在 setTab函数中，我接收了类名作为 params 表单选项卡，并将其保存在本地存储中。在文档就绪函数中，我检查了活动类是否存在。如果存在，我将该选项卡设置为活动的，或将基本选项卡设置为活动的

$(document).ready(function() {
var activeTab = localStorage.getItem('activeTab');
if (activeTab) {
$('#v-pills-'+activeTab+'-tab').addClass('active');
$('#v-pills-'+activeTab).addClass('show active');
} else {
$('#v-pills-basic-tab').addClass('active');
$('#v-pills-basic').addClass('show active');
}
})


function setTab(params) {
localStorage.setItem('activeTab', params);
}

提交答案