/ / bootstrap 2.0 Aktywacja karty i danych według adresu URL w zakładce-content - jquery, html, css, twitter-bootstrap

bootstrap 2.0 Aktywacja karty i danych według adresu URL w zakładce-content - jquery, html, css, twitter-bootstrap

Widziałem wiele pytań na ogół poruszających ten temat, wiem dokładnie, co należy zrobić, ale nie jestem "płynny" z jQuery, dlatego nie mogę tego zrobić z powodzeniem.

 <ul class="nav nav-pills" id="activate">
<li><a href="#tab1" data-toggle="tab">Tab 1</a></li>
<li class="active"><a href="#tab2" data-toggle="tab">Tab 2</a></li>
</ul>

<div class="tab-content">
<div id="tab1"><h1>Data for Tab 1</h2></div>
<div id="tab2">
<a href="#tab1" rel="taburl" data-toggle="tab">Take me to tab content #1</a>
</div>

W idealnym przypadku dane tej karty zostaną zmienione na # tab1, jednak karta nie zostanie przełączona active klasa na href="#tab1" (pozostaje aktywny #tab2 ale wyświetla dane z #tab1)

Pomyślałem, że mogę użyć .first() metoda i cel pierwszego wystąpienia href="#tab1 i .addClass("active") do tego li. Ale nie wiem, jak wybrać li dla anylink I link do niego, aby kierować to bezpośrednio href ID

Naprawdę nie wiem, czy da się to zrobić. Czy mogę wstrzyknąć href dane z łącza (z jQuery), a następnie dodaj je do łącza karty i uaktywnij.

I znowu, data-toggle="tab" przełącza na właściwą zawartość, ale nie aktualizuje aktywnej karty na pasku nawigacyjnym,

więc jest sposób, aby wybrać tę dokładną "kartę" i .addClass("active") do <li> raz wyrzuciłem link.

Dziękuję za Twój czas.

PRZYKŁAD JSFIDDLE

http://jsfiddle.net/epiceon/M6NQJ/1/

Odpowiedzi:

2 dla odpowiedzi № 1

Jeśli przełączasz się między kartami takimi jak te, będziesz musiał zadzwonić tab("show") ponownie na zakładce, do której zamierzasz przejść.

Na marginesie warto rozważyć aktualizacjędo wersji 2.0.3, jeśli korzystasz z kart, naprawiono kilka błędów (głównie z zakładkami po lewej lub prawej stronie), ale nawet upuszczenie w nowym pliku navs.less może zaoszczędzić ci bólu głowy w dół drogi.


1 dla odpowiedzi nr 2

Napotkałem coś podobnego, próbując ręcznie zamknąć kartę w sobie.

Oto działa jsFiddle:

http://jsfiddle.net/WnQvF/8/

Zauważ, że właśnie skopiowałem z mojego projektu. Rozwiązanie może nie być najczystsze dla twojego problemu, ale dowiesz się, jak to działa. Pamiętaj, aby wymienić Tabulatory i Przycisk w Tab.3.