Zajmuję się tworzeniem strony internetowej, w której korzystam z platformy Bootstrap Framework Twittera i jej kart Bootstrap JS . Działa świetnie, z wyjątkiem kilku drobnych problemów, z których jednym jest to, że nie wiem, jak przejść bezpośrednio do konkretnej karty z linku zewnętrznego. Na przykład:
<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>
powinien przejść odpowiednio do karty Strona główna i karty Notatki po kliknięciu linków ze strony zewnętrznej
javascript
html
tabs
twitter-bootstrap
mraliks
źródło
źródło
Odpowiedzi:
Oto moje rozwiązanie problemu, być może nieco spóźnione. Ale może pomóc innym:
źródło
window.scrollTo(0, 0);
aby okno zawsze przewijało się do górySyntax error, unrecognized expression: .nav-tabs a[href=#tab-2]
. Rozwiązane przy użyciu stackoverflow.com/questions/12131273/...AKTUALIZACJA
W przypadku Bootstrap 3 zmień
.on('shown', ...)
na.on('shown.bs.tab', ....)
Jest to oparte na odpowiedzi @dubbe i tej zaakceptowanej odpowiedzi SO . Rozwiązuje problem z
window.scrollTo(0,0)
nieprawidłowym działaniem. Problem polega na tym, że po zastąpieniu skrótu adresu URL na zakładce przeglądarka przewinie ten skrót, ponieważ jest to element na stronie. Aby obejść ten problem, dodaj prefiks, aby skrót nie odwoływał się do rzeczywistego elementu stronyPrzykład zastosowania
Jeśli masz tabulatory z id = "mytab", musisz umieścić swój link w następujący sposób:
źródło
$('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
możesz wywołać
click
zdarzenie w odpowiednim zakładce:źródło
Jest to ulepszona implementacja rozwiązania dubbe, która zapobiega przewijaniu.
źródło
Chociaż dostarczone rozwiązanie JavaScript może działać, poszedłem w nieco inny sposób, który nie wymaga dodatkowego JavaScript, ale wymaga logiki w twoim widoku. Tworzysz link ze standardowym parametrem adresu URL, takim jak:
Następnie po prostu wykrywasz wartość activeTab, aby napisać „class =" active ”w odpowiednim polu
<li>
Pseudokod (zaimplementuj odpowiednio w swoim języku). Uwaga Ustawiłem kartę „home” jako domyślną aktywną, jeśli w tym przykładzie nie podano parametru.
źródło
Nie jestem wielkim fanem if ... else; więc podjąłem prostsze podejście.
Nie adresuje przewijania do żądanego skrótu; ale powinien ?
źródło
W przypadku Bootstrap 3:
https://jsfiddle.net/DTcHh/6638/
źródło
Działa to w Bootstrap 3 i poprawia 2 najlepsze odpowiedzi dubbe i flynfish, integrując również odpowiedź GarciaWebDev (która pozwala na parametry adresu URL po skrócie i pochodzi bezpośrednio od autorów Bootstrap na trackerze problemów github):
źródło
'shown'
powinno być zgodne'shown.bs.tab'
z dokumentami: getbootstrap.com/javascript/#tabs-events . Jestem zaskoczony, dlaczego, ale kiedy próbowałem edytować Twój post, został odrzucony ...Ten kod wybiera odpowiednią kartę w zależności od # skrótu i dodaje prawy # skrót po kliknięciu karty. (używa jquery)
W Coffeescript:
lub w JS:
źródło
Opierając się na rozwiązaniu Demircana Celebi; Chciałem otworzyć kartę podczas modyfikowania adresu URL i otwierać kartę bez konieczności ponownego ładowania strony z serwera.
źródło
Ten kod z http://github.com/twitter/bootstrap/issues/2415#issuecomment-4450768 działał dla mnie idealnie.
źródło
@flynfish + @Ztyx rozwiązanie, którego używam dla zagnieżdżonych kart:
dzieci powinny mieć class = "nested"
źródło
Wymyśliłem rozwiązanie, które używa skrótu URL lub localStorage w zależności od dostępności tego ostatniego z poniższym kodem:
źródło
Sugeruję użycie kodu dostarczonego przez autorów Bootstrap w narzędziu do śledzenia problemów na GitHub :
W linku do problemu można znaleźć więcej informacji o tym, dlaczego nie zdecydowali się go obsługiwać.
źródło
Wypróbowałem kilka sposobów omówionych powyżej i skończyłem na działającym rozwiązaniu, po prostu skopiuj i wklej w edytorze, aby spróbować. Aby przetestować, po prostu zmień skrót na skrzynkę odbiorczą, skrzynkę nadawczą, wpisz adres URL i naciśnij klawisz Enter.
Mam nadzieję, że pozwoli to zaoszczędzić Twój czas.
źródło
Oto, co zrobiłem, naprawdę proste i pod warunkiem, że linki do kart mają powiązany identyfikator, możesz pobrać atrybut href i przekazać go do funkcji wyświetlającej zawartość karty:
Następnie w swoim adresie URL możesz dodać skrót jako coś w stylu: # tab_tab1, część „tab_” jest usuwana z samego skrótu, więc identyfikator rzeczywistego łącza do karty w zakładkach nawigacyjnych (tabid1) jest następnie umieszczany, więc twoja URL wyglądałby mniej więcej tak: www.mydomain.com/index.php#tab_tabid1.
Działa to idealnie dla mnie i mam nadzieję, że pomoże komuś innemu :-)
źródło
To jest moje rozwiązanie do obsługi zagnieżdżonych kart. Właśnie dodałem funkcję sprawdzania, czy aktywna karta ma kartę nadrzędną do aktywacji. To jest funkcja:
I można go tak nazwać (w oparciu o rozwiązanie @ flynfish):
To rozwiązanie działa w tej chwili dla mnie całkiem dobrze. Mam nadzieję, że może to być przydatne dla kogoś innego;)
źródło
Musiałem zmodyfikować kilka bitów, aby to działało dla mnie. Korzystam z Bootstrap 3 i jQuery 2
źródło
Po prostu wstaw ten kod na swojej stronie:
źródło
Właśnie miałem ten problem, ale potrzebowałem obsługiwać wiele poziomów kart. Kod jest raczej brzydki (patrz komentarze), ale spełnia swoje zadanie: https://gist.github.com/JensRantil/4721860 Mam nadzieję, że ktoś inny uzna go za przydatny (i może zaproponować lepsze rozwiązania!).
źródło
Łącząc fragmenty z innych odpowiedzi, oto rozwiązanie, które może otworzyć wiele poziomów zagnieżdżonych kart:
źródło
$('.nav-tabs li a').click( function(e) { history.pushState( null, null, $(this).attr('href') );});
javascript nad twoim kodem.Jeśli ma to znaczenie dla każdego, poniższy kod jest mały i działa bez zarzutu, aby uzyskać pojedynczą wartość skrótu z adresu URL i pokazać, że:
robi to, pobiera identyfikator i uruchamia zdarzenie click. Prosty.
źródło
Robię coś takiego dla linków z ajax
#!#
(np. / Test.com #! # Test3), ale możesz to modyfikować cokolwiek chceszPrzykład z prostą stroną na Github tutaj
źródło
Wiem, że ten wątek jest bardzo stary, ale zostawię tutaj własną implementację:
Zauważ, że używam
nav-
przedrostka klasy do nawigacji linków.źródło