Staram się, aby wybrana karta była aktywna podczas odświeżania za pomocą Bootstrap 3 . Próbowałem i sprawdziłem z jakimś pytaniem już tu zadanym, ale nic nie działa dla mnie. Nie wiem, gdzie się mylę. Oto mój kod
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
Code Lover
źródło
źródło
console.log("selectedTab::"+selectedTab);
, mam:selectedTab::undefined
. Więc zastosowana logika jest nieprawidłowaOdpowiedzi:
Wolę przechowywać wybraną kartę w wartości skrótu okna. Umożliwia to również wysyłanie linków do współpracowników, którzy niż widzą „tę samą” stronę. Sztuczka polega na zmianie skrótu lokalizacji po wybraniu innej karty. Jeśli już używasz # na swojej stronie, prawdopodobnie tag hash musi zostać podzielony. W mojej aplikacji używam znaku „:” jako separatora wartości skrótu.
JavaScript, musi być osadzony po powyższym w
<script>...</script>
części.źródło
e.preventDefault();
i$(this).tab('show');
To najlepszy, jaki próbowałem:
źródło
"a[data-toggle=tab]"
byłaby lepsza. Sposób, w jaki selektor jest teraz napisany, zmienia również adres URL przeglądarki po kliknięciu łącza, na przykład w celu otwarcia modalu.data-toggle="dropdown"
. I które zdarza mi się mieć na tej samej stronie z zakładkami w jednym przypadku, jak ktoś zasugerował, po prostu zastępując$(document.body).on("click", "a[data-toggle]", function(event) {
z$(document.body).on("click", "a[data-toggle='tab']", function(event) {
wystarczyły dla mnie.Mieszanka odpowiedzi innych:
Po prostu skopiuj i wklej;)
źródło
Kod Xaviego działał prawie w pełni. Ale kiedy przechodziłem do innej strony, przesyłając formularz, a potem przekierowywany na stronę z moimi kartami, w ogóle nie ładował zapisanej karty.
localStorage na ratunek (nieznacznie zmieniony kod Nguyen):
źródło
[data-toggle="pill"]
na pigułkiTen używa HTML5
localStorage
do przechowywania aktywnej kartyref: 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
źródło
Opierając się na odpowiedziach udzielonych przez Xavi Martínez i koppor , wymyśliłem rozwiązanie, które używa skrótu adresu URL lub localStorage w zależności od dostępności tego ostatniego:
Stosowanie:
Nie nadąża za przyciskiem powrotu, jak ma to miejsce w przypadku rozwiązania Xavi Martínez .
źródło
Mój kod działa na mnie, używam
localStorage
HTML5źródło
Wypróbowałem to i działa: (Zastąp to tabletką lub tabletką, której używasz)
Mam nadzieję, że komuś to pomoże.
Oto wynik: https://jsfiddle.net/neilbannet/ego1ncr5/5/
źródło
Cóż, to już 2018 rok, ale myślę, że lepiej późno niż wcale (jak tytuł w programie telewizyjnym), lol. Na dole jest kod jQuery, który tworzę podczas mojej pracy magisterskiej.
a oto kod dla zakładek bootstrap:
oto szybkie kody dla Ciebie:
Przejdźmy teraz do wyjaśnienia:
Szukasz przykładów? tutaj jest jeden dla was .. https://jsfiddle.net/Wineson123/brseabdr/
Chciałbym, żeby moja odpowiedź pomogła wam wszystkim… Cheerio! :)
źródło
Ponieważ nie mogę jeszcze komentować, skopiowałem odpowiedź z góry, naprawdę mi to pomogło. Ale zmieniłem to tak, aby działało z plikami cookie zamiast #id, więc chciałem udostępnić zmiany. Umożliwia to przechowywanie aktywnej karty dłużej niż tylko jedno odświeżenie (np. Wielokrotne przekierowanie) lub gdy identyfikator jest już używany i nie chcesz implementować metody podziału koppors.
źródło
Wypróbowałem kod oferowany przez Xavi Martínez . Zadziałało, ale nie dla IE7. Problem w tym, że zakładki nie odnoszą się do żadnych istotnych treści.
Więc wolę ten kod do rozwiązania tego problemu.
źródło
Dzięki za udostępnienie.
Czytając wszystkie rozwiązania. Wymyśliłem rozwiązanie, które wykorzystuje skrót adresu URL lub localStorage w zależności od dostępności tego ostatniego z poniższym kodem:
źródło
W przypadku wersji Bootstrap 4.3.1. Spróbuj poniżej:
źródło
Używając html5, ułożyłem to:
Gdzie na stronie:
Viewbag powinien zawierać tylko identyfikator strony / elementu, np .: "testing"
Utworzyłem plik site.js i dodałem skrypt na stronie:
Teraz wszystko, co musisz zrobić, to dodać swoje identyfikatory do paska nawigacyjnego. Na przykład.:
Wszyscy witają atrybut danych :)
źródło
Oprócz odpowiedzi Xavi Martínez unikającej skoku po kliknięciu
Unikanie skoku
Zagnieżdżone karty
implementacja ze znakiem „_” jako separatorem
źródło
Użyliśmy wyzwalacza jquery, aby załadować skrypt, który nacisnął przycisk za nas
$ (". nazwa_klasy"). wyzwalacz ('klik');
źródło
Biada, jest na to tak wiele sposobów. Wymyśliłem to, krótkie i proste. Mam nadzieję, że to pomoże innym.
źródło
źródło