Как сохранить текущую вкладку активной с помощью Twitter bootstrap после перезагрузки страницы?
в настоящее время я использую вкладки с загрузкой Twitter и хочу выбрать ту же вкладку после того, как пользователь разместил данные и перезагрузил страницу.
Как это сделать?
мой текущий вызов inti вкладки выглядят следующим образом:
<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>
17 ответов
для этого вам придется использовать localStorage или cookies. Вот быстрое и грязное решение, которое можно значительно улучшить, но может дать вам отправную точку:
$(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');
}
});
получил это для работы с помощью cookies, а также удаления класса "active" из любых других вкладок и панелей вкладок... и добавление класса "active" на текущую вкладку и панель вкладок.
Я уверен, что есть лучший способ сделать это, но в этом случае это работает.
требуется плагин cookie jQuery.
$(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
но со строкой 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. Спасибо Ален
для лучшего варианта используйте эту технику:
$(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();
}
});
Я предпочитаю хранить выбранную вкладку в hashvalue окна. Это также позволяет отправлять ссылки коллегам, которые видят "ту же" страницу. Хитрость состоит в том, чтобы изменить хэш местоположения, когда выбрана другая вкладка. Если вы уже используете # на своей странице, возможно, хэш-тег должен быть разделен. В моем приложении я использую ":" в качестве разделителя хэш-значений.
<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 (это происходит, когда вы определяете класс "активный" по умолчанию в первой вкладке)
удалите класс "active" вкладок и панелей, таких как:
<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:
- Для Bootstrap 3
- настраивает классы на div li и tab, чтобы включить выцветание для правильной работы. Обратите внимание, что все содержимое 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 предыдущей страницы в хранилище, она не нашла здесь никакой соответствующей вкладки, поэтому ничего не отображалось. Я изменил его таким образом.
$(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');
}
})
edit: Я заметил, что мне придется иметь разные lastTab
имена переменных для разных страниц, иначе они всегда будут перезаписывать друг друга. например,lastTab_klanten
, lastTab_bestellingen
etc. для двух разных страницы klanten
и bestellingen
оба имеют данные, отображаемые на вкладках.
$(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, в этом случае ссылки <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');
}
});
Я предлагаю следующие изменения
использовать плагин типа усилить.магазин что обеспечивает crossbrowser / crossplatform localstorage API со встроенными резервными копиями.
целевая вкладка, которая должна быть сохранена как
$('#div a[data-toggle="tab"]')
чтобы расширить эту функциональность до нескольких контейнеров вкладок, которые существуют на одной странице.используйте уникальный идентификатор
(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');
}
});
простое решение без локального хранилища:
$(".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";
}
}
Если вы хотите показать первую вкладку при первом входе на страницу, используйте этот код:
<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 3 и jQuery и С разными URL-адресами, содержащими разные вкладки. Он не поддерживает несколько вкладок на каждой странице но это должна быть легкая модификация, если вам нужна эта функция.
/**
* 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();
}
});
$(документ).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');
});