Я пытаюсь сохранить выбранную вкладку активной при обновлении с помощью 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');
}
jquery
twitter-bootstrap
tabs
twitter-bootstrap-3
Любитель кода
источник
источник
console.log("selectedTab::"+selectedTab);
, я получил:selectedTab::undefined
. Значит, примененная вами логика невернаОтветы:
Я предпочитаю сохранять выбранную вкладку в хэш-значении окна. Это также позволяет отправлять ссылки коллегам, которые видят «ту же» страницу. Хитрость заключается в том, чтобы изменить хэш местоположения при выборе другой вкладки. Если вы уже используете # на своей странице, возможно, хэш-тег должен быть разделен. В моем приложении я использую ":" в качестве разделителя значений хеш-функции.
JavaScript должен быть встроен после указанного выше в
<script>...</script>
часть.источник
e.preventDefault();
$(this).tab('show');
Это лучший вариант, который я пробовал:
источник
"a[data-toggle=tab]"
было бы лучше изменить селектор на . Теперь, как написан селектор, он также изменяет URL-адрес браузера при нажатии на ссылку, например, для открытия модального окна.data-toggle="dropdown"
. И которые я случиться , чтобы на одной странице с вкладками в одном случае , как кто - то предложил здесь, просто заменить$(document.body).on("click", "a[data-toggle]", function(event) {
с$(document.body).on("click", "a[data-toggle='tab']", function(event) {
сделал трюк для меня.Смесь других ответов:
Просто скопируйте и вставьте;)
источник
Код Хави почти полностью работал. Но при переходе на другую страницу, отправке формы и последующем перенаправлении на страницу с моими вкладками сохраненная вкладка вообще не загружалась.
localStorage приходит на помощь (немного изменен код Нгуена):
источник
[data-toggle="pill"]
для таблетокЭтот использует HTML5
localStorage
для хранения активной вкладкиссылка: 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
источник
Основываясь на ответах, предоставленных Хави Мартинесом и Коппором, я придумал решение, которое использует хеш URL-адреса или localStorage в зависимости от доступности последнего:
Использование:
Она не успевает за кнопкой возврата, как в случае с решением Хави Мартинеса .
источник
Мой код, у меня работает, я использую
localStorage
HTML5источник
Я пробовал это, и это работает: (Пожалуйста, замените это таблеткой или вкладкой, которую вы используете)
Надеюсь, это кому-нибудь поможет.
Вот результат: https://jsfiddle.net/neilbannet/ego1ncr5/5/
источник
Что ж, это уже 2018 год, но я думаю, что лучше поздно, чем никогда (как заголовок в телепрограмме), лол. Вот код jQuery, который я создал во время своей диссертации.
и вот код для вкладок начальной загрузки:
вот вам быстрые коды:
Теперь приступим к объяснению:
Ищете примеры? вот вам, ребята .. https://jsfiddle.net/Wineson123/brseabdr/
Я бы хотел, чтобы мой ответ помог вам всем .. Cheerio! :)
источник
Поскольку я пока не могу комментировать, я скопировал ответ сверху, это мне очень помогло. Но я изменил его для работы с куки-файлами вместо #id, поэтому я хотел поделиться изменениями. Это позволяет хранить активную вкладку дольше, чем одно обновление (например, многократное перенаправление) или когда идентификатор уже используется, и вы не хотите реализовывать метод разделения koppors.
источник
Я попробовал код, предложенный Хави Мартинесом . Это сработало, но не для IE7. Проблема в том, что вкладки не относятся к какому-либо релевантному контенту.
Итак, я предпочитаю этот код для решения этой проблемы.
источник
Спасибо, что поделился.
Прочитав все решения. Я придумал решение, которое использует хэш URL-адреса или localStorage в зависимости от доступности последнего с приведенным ниже кодом:
источник
Для Bootstrap v4.3.1. Попробуйте ниже:
источник
Используя html5, я приготовил вот это:
Кое-где на странице:
Пакет просмотра должен содержать только идентификатор страницы / элемента, например: "тестирование"
Я создал site.js и добавил скрипт на страницу:
Теперь все, что вам нужно сделать, это добавить свой идентификатор на панель навигации. Например.:
Все приветствуют атрибут данных :)
источник
В дополнение к ответу Хави Мартинеса, избегающему прыжка при нажатии
Избегание прыжка
Вложенные вкладки
реализация с символом "_" в качестве разделителя
источник
Мы использовали триггер jquery для загрузки, чтобы скрипт нажал кнопку для нас
$ ( "Class_name.") Триггер (до щелчка).
источник
Горе, есть так много способов сделать это. Я придумал это коротко и просто. Надеюсь, это поможет другим.
источник
источник