Martin H
Angesehenes Mitglied
Hallo, wir setzen in einem Projekt folgenden jquery Code ein für eine Tab Navigation. jetzt ist der Wunsch aufgetaucht, dass man die einzelnen Tabs direkt von extern verlinken kann. Ich weiss es gibt Jquery UI Tabs, mit dem das geht. Aber evtl. kann man auch den bestehenden JS Code erweiteren / anpassen, ohne dass ich den ganzen Code über den haufen werfen muss.
Grüsse
Martin
Javascript:
/* - TAB SWITCH - */
$(document).ready(function() {
$(".tab_content".hide(); //Hide all content
$("ul.tabs li:first".addClass("active".show(); //Activate first tab
$(".tab_content:first".show(); //Show first tab content
$("ul.tabs li".click(function() {
$("ul.tabs li".removeClass("aktiv" //Remove any "active" class
$(this).addClass("aktiv" //Add "active" class to selected tab
$(".tab_content".hide(); //Hide all tab content
var activeTab = $(this).find("a".attr("href" //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
Code im HTML / Aufruf:
<ul class="tabs">
<li class="aktiv"><a href="#tab1"><span>Tab 1</span></a></li>
<li><a href="#tab2"><span>Tab 2</span></a></li>
<li><a href="#tab3"><span>Tab 3</span></a></li>
<li><a href="#tab4"><span>Tab 4</span></a></li>
</ul>
<div id="inhalt">
<div id="tab1" class="tab_content text">
<p>blalba</p>
</div>
<div id="tab2" class="tab_content text">
<p>blalba</p>
</div>
<div id="tab3" class="tab_content text">
<p>blalba</p>
</div>
<div id="tab4" class="tab_content text">
<p>blalba</p>
</div>
</div>
Grüsse
Martin
Javascript:
/* - TAB SWITCH - */
$(document).ready(function() {
$(".tab_content".hide(); //Hide all content
$("ul.tabs li:first".addClass("active".show(); //Activate first tab
$(".tab_content:first".show(); //Show first tab content
$("ul.tabs li".click(function() {
$("ul.tabs li".removeClass("aktiv" //Remove any "active" class
$(this).addClass("aktiv" //Add "active" class to selected tab
$(".tab_content".hide(); //Hide all tab content
var activeTab = $(this).find("a".attr("href" //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
Code im HTML / Aufruf:
<ul class="tabs">
<li class="aktiv"><a href="#tab1"><span>Tab 1</span></a></li>
<li><a href="#tab2"><span>Tab 2</span></a></li>
<li><a href="#tab3"><span>Tab 3</span></a></li>
<li><a href="#tab4"><span>Tab 4</span></a></li>
</ul>
<div id="inhalt">
<div id="tab1" class="tab_content text">
<p>blalba</p>
</div>
<div id="tab2" class="tab_content text">
<p>blalba</p>
</div>
<div id="tab3" class="tab_content text">
<p>blalba</p>
</div>
<div id="tab4" class="tab_content text">
<p>blalba</p>
</div>
</div>