[HTML, Javascript] Tabs und SubTabs realisieren

[Yheeky]

Hi,

ich habe folgendes Problem: ich habe ein ASP-Projekt mit einer Masterseite. Auf der Masterseite habe ich folgende Struktur, die mir eine Tab-Navigation ermöglicht:

Code:

<div id="Tabs">
   <ul id="MainTabs">
      [*][url="#Users"]Users[/url]
      [*][url="#Products"]Products[/url]
   [/list]   <div id="Users">
      <div id="SubTabs">
         <a href ="/CreateUser"><div id="SubTabUserCreate">Create user</div></a>
              <a href ="/EditUser"><div id="SubTabUserEdit">Edit user</div></a>
                  <a href ="/DeleteUser"><div id="SubTabUserDelete">Delete user</div></a>
           </div>
   </div>
   <div id="Products">
      <div id="SubTabs">
         <a href ="/CreateProduct"><div id="SubTabProductCreate">Create product</div></a>
                  <a href ="/EditProduct"><div id="SubTabProductEdit">Edit product</div></a>
                  <a href ="/DeleteProduct"><div id="SubTabProductDelete">Delete product</div></a>
           </div>
   </div>
</div>

Über ein JavaScript auf meiner Masterseite, lasse ich bei einem Klick auf die Tabs ("div id 'Users'" und "div id='Products'") die jeweiligen Unter-Divs sichtbar machen. Das JavaScript sieht so aus:

Code:

<script type="text/javascript">
        $(function () {
            var tabContainers = $('div#Tabs > div');
    
            $('div#Tabs ul#MainTabs a').click(function () {
                tabContainers.hide().filter(this.hash).fadeIn();
        
                $('div#Tabs ul#MainTabs a').removeClass('selected');
                $(this).addClass('selected');
            });
        });
    </script>

Wenn ich nun auf einer Unterseite wechsele, möchte ich, dass trotzdem das betreffende Tab zur Auswahl steht, also aufgerufen wird. Beispiel:
Auf meiner User-Seite werden ja ohnehin die Tabs angezeigt, weil sie auf der Masters-Seite sind. Ich möchte nun aber, dass auch die betreffenden User-Tabs aufgeklappt sind. Dies habe ich mit folgendem Script auf der User-Seite versucht:

Code:

<script type="text/javascript">
    $(function() {
        $('div#Tabs ul#MainTabs div#Users').click();
    });
</script>

Leider funktioniert das aber so nicht. Hat jemand eine Idee, wie ich den Code umschreiben muss, damit er funktioniert?
Falls es (Verständnis)-Fragen gibt, einfach Fragen :-)

Danke schonmal im Vorraus!

Crosslink von gestern aus einem anderen Forum

[Matze]

Hallo,

könntest du bitte eine kleine Demo zeigen?
Ich habe es versucht (s. Anhang), kann das angesprochene Verhalten jedoch nicht erkennen.

Grüße, Matze

[Yheeky]

Hi Matze,

danke erstmal für die Antwort :-)
Also die Menüs lassen sich ja auch bei mir aufklappen ;-)
Das Problem ist der Wechsel auf andere Seiten, da hätte ich gerne, dass das gewählte Menü trotzdem offen bleibt.
Habe mal ein kleines Testprogramm erstellt und angehängt. Normalerweise arbeite ich mit Masterpages.

[Matze]

Hallo,

jetzt erkenne ich dein Problem. Also "onclick" kann nicht funktionieren, da du beim Klick auf "Create User" eine neue Seite aufrufst und damit laufendes JS "abbrichst".

Ich würde nie und nimmer die Tabs in jede Unterseite einfügen. Was glaubst du, wie aufwändig die Wartung der Website wird? Eine Änderung bei den Tabs und du darfst sämtliche Unterseiten anpassen.
Lade den Inhalt doch auch per JS, wenn deine Seite sowieso nur mit aktiviertem JS bedienbar ist (momentan sieht es danach aus).

Grüße, Matze

[Yheeky]

Zitat:

jetzt erkenne ich dein Problem. Also "onclick" kann nicht funktionieren, da du beim Klick auf "Create User" eine neue Seite aufrufst und damit laufendes JS "abbrichst".

Ah okay, dann ist das das Problem :-)

Zitat:

Ich würde nie und nimmer die Tabs in jede Unterseite einfügen. Was glaubst du, wie aufwändig die Wartung der Website wird? Eine Änderung bei den Tabs und du darfst sämtliche Unterseiten anpassen.
Lade den Inhalt doch auch per JS, wenn deine Seite sowieso nur mit aktiviertem JS bedienbar ist (momentan sieht es danach aus).

Nein, das mache ich auch nicht. Ich habe dir das nur mal als Beispiel zusammengestrickt. Eigentlich handelt es sich wie gesagt um eine Masterpage, die ich mit ASP.NET erstellen kann. Ein Laden über JavaScript im Hyperlink ist da irgendwie nicht möglich, jedenfalls habe ich dein Beispiel gerade mal übertragen und das hat nicht geklappt.
Um mein Problem in HTML am besten zu realisieren, habe ich den Code für die Tabs, nochmal in jede Datei geschrieben. Ich brauche also in der CreateUser.html oder EditUser.html einfach eine Java-Funktion, die einen Klick auflöst, oder?

Kannst du mein Beispiel mal so umwerkeln, dass das funktioniert?

[Matze]

Irgendwie musst du dann wohl mit JS ermitteln, auf welcher Seite du dich befindest. Ich habe dafür nun das h2-Tag verwendet.
Vermutlich geht es auch anders, aber so versiert bin ich in Sachen JS dann nicht. ;)

[sniper_w]

Da du schon jquery verwendest, wieso nimmst nicht gleich auch jquery-ui mit? Da sind schon u.a. Tabs implementiert.

[Yheeky]

Zitat:

Zitat von Matze

Irgendwie musst du dann wohl mit JS ermitteln, auf welcher Seite du dich befindest. Ich habe dafür nun das h2-Tag verwendet.
Vermutlich geht es auch anders, aber so versiert bin ich in Sachen JS dann nicht. ;)

Cool, genau so läufts :-) Danke!

Zitat:

Zitat von sniper_w

Da du schon jquery verwendest, wieso nimmst nicht gleich auch jquery-ui mit? Da sind schon u.a. Tabs implementiert.

Ja, aber keine SubTabs ;-) deswegen mach ich das lieber neu...

[sniper_w]

Subtabs sind auch kein Problemm, nur Tabs in einem parent Tabpanel