Jquery Tabs, brauche Hilfe

[Martin H]

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&quot.hide(); //Hide all content
$("ul.tabs li:first&quot.addClass("active&quot.show(); //Activate first tab
$(".tab_content:first&quot.show(); //Show first tab content

$("ul.tabs li&quot.click(function() {
$("ul.tabs li&quot.removeClass("aktiv" //Remove any "active" class
$(this).addClass("aktiv" //Add "active" class to selected tab
$(".tab_content&quot.hide(); //Hide all tab content
var activeTab = $(this).find("a&quot.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>

 

[Martin H]

hab noch eine Demoseite eingerichtet, falls jemand eine Idee hat! Wäre für Hilfe wirklich sehr dankbar!

http://beta2.nextron.ch/test/unterseite_1.html

Grüsse

Martin

 

[Christian_]

Hallo Martin

diese Informationen sollten weiterhelfen:

http://stackoverflow.com/questions/298503/...sing-javascript

 

[Martin H]

Hi Christian
Danke für die Info. Hast Du evtl. eine Ahnung, wie ich das bei meinem Beispiel einbaue?
Grüsse
Martin

 

[Christian_]

Moin Martin,

ich bin leider (noch) nicht so mit jQuery vertraut, wie ichsein will, daher hier nur mein derzeitiger Versuch:

CODE
/* - TAB SWITCH - */

$(document).ready(function() {
if($(location).attr("hash")){
  $(".tab_content").hide();
  $("ul.tabs li").removeClass("aktiv");
  $("a[hash="+$(location).attr("hash")+"]").parent().addClass("aktiv");
 $($(location).attr("hash")).fadeIn();
 }else{
 $(".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;
});

});



Wie Du siehst, ist hier das "return false;" in der click() function auskommentiert. Hintergrund ist, dass dadurch dann die URL mit dem Hash lädt, so dass die URL kopierbar wird.

Derzeitig in dem Beispiel noch ungelöst ist das History Problem im Browser, d.h. beim Nutzen des Back Buttons ändert sich zwar das hash in der url, aber dies triggert nicht den richtigen Inhalt.

Zudem ist der Code von mir derzeit nur im aktuellen Firefox getestet.

Falls Du eine wesentlich elegantere und brauchbare und gut getestete Version verwenden willst, empfehle ich

http://flowplayer.org/tools/demos/tabs/history.html

Viele Grüße

Christian

 

[Martin H]

Hi Christian

Doch super. Vielen 100 Dank. Das ist gut so.. History back / Browser Back ist für den Anfang egal.. Was noch störend ist, dass man innerhalb der gleichen Seite nicht auf einen anderen Tab innerhalb der Seite linken kann (Ausser in einem neuen Fenster). Aber da kann ich evtl. einen Refresh einbauen. Irgendwie springt es bei zu langen Inhalte noch zu weit nach unten, sodass man dann die Tabs nicht mehr sieht....

Das Flowplayer Teil hab ich mir mal angeguckt. Arbeitet mit einem fixen grafischen Hintergrund und Koordinaten im CSS. Das ist für die Generierung aus dem CMS raus nicht optimal.. Aber evtl. geht das auch anderst.....

Grüsse

Martin