/ / bootstrap 2.0 Aktivácia karty a údajov podľa url v rámci tab-content - jquery, html, css, twitter-bootstrap

bootstrap 2.0 Aktivácia karty a údajov podľa url v rámci tab-content - jquery, html, css, twitter-bootstrap

Videl som veľa otázok, ktoré sa vo všeobecnosti dotýkajú tejto témy, viem presne to, čo je potrebné urobiť, ale ja nie som "plynulý" s jQuery preto nemôžem úspešne urobiť to.

 <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>

V ideálnom prípade sa dáta tejto karty prepnú na # tab1, ale karta sa nezapne active trieda na href="#tab1" (zostane aktívny na #tab2 ale zobrazuje údaje z #tab1)

Myslel som, že by som mohol použiť .first() metóda a zacielenie na prvý výskyt href="#tab1 a .addClass("active") k tomuto li. Ale neviem, ako vybrať Li pre anylink, ktorý som k nemu pripojil, aby som to priamo zamerial href ID

Naozaj neviem, či sa to dá urobiť. Môžem si podať injekciu href údaje z odkazu (s jQuery), potom ho pridajte do záložky a urobte ho aktívnym.

A znova data-toggle="tab" prepína na správny obsah, ale neaktualizuje aktívnu kartu na paneli navbar,

tak existuje spôsob, ako vybrať túto presnú "kartu" a .addClass("active") na <li> akonáhle som prepustil odkaz.

Ďakujem za Tvoj čas.

PRÍKLAD JSFIDDLE

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

odpovede:

2 pre odpoveď č. 1

Ak prepínate medzi kartami, ktoré potrebujete zavolať tab("show") znova na záložke, ktorú chcete použiť.

Na vedľajšej poznámke by ste mali zvážiť aktualizáciu vášhoverzia 2.0.3, ak používate záložky. Opravili niekoľko chýb (väčšinou s kartami vľavo alebo vpravo), ale dokonca aj klesnutie do nového súboru navs.less vám môže ušetriť bolesť hlavy po ceste.


1 pre odpoveď č. 2

Zistil som niečo podobné, keď som sa pokúsil manuálne zatvoriť kartu v sebe.

Pracuje jsFiddle:

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

Všimnite si, že som práve kopíroval z môjho projektu. Takže riešenie nemusí byť najčistejšie pre váš problém, ale vy dostanete, ako to funguje. Nezabudnite menovať tlačidlá Tab a tlačidlo v rámci karty 3.