Reiter Wechseln ohne Seite neu zu laden

[gbst51sc]

Hallo zusammen,

wie schaffe ich es mittels Klick auf einen "Reiter" diesen zu aktivieren und den dazugehörigen Inhalt anzeigen zu lassen.
Beispiel:
web.de Reiter "Suche", "FreeMail", "Web.de Club"

Die "Reiter" habe ich als Liste mit entsprechendem CSS deklariert. die Klasse "akt" formatiert den aktuell aktiven Reiter:

<div class="reiter">
<ul>
<li class="akt"><a href="http://www.html.de/html-und-xhtml/...">Übersicht</a></li>
<li><a href="http://www.html.de/html-und-xhtml/...">Seite 2</a></li>
<li><a href="http://www.html.de/html-und-xhtml/...">Seite 3</a></li>
</ul>
</div>
<div class="inhalt">
<div id="inh1">Inhalt Übersicht</div>
<div id="inh2">Inhalt Seite 2</div>
<div id="inh3">Inhalt Seite 3</div>
</div>

Bei Klick auf Übersicht soll also Übersicht den Style "akt" bekommen und nur div "inh1" anzeigen usw...
Der Inhalt wird beim aufrufen der Seite komplett geladen, das braucht also nicht gemacht zu werden.
Das ganze soll wenn möglich auch funktionieren, wenn JavaScript deaktiviert ist!!!

Vielen Dank im Vorraus

 

[threadi]

Das geht indem Du die Inhalte im HTML-Code hinterlegst, aber per CSS nur einen Bereich einblendest. Per Klick wird über JavaScript der jeweils angeklickte Bereich ein und der andere ausgeblendet. Siehe auch:
Cascading Style Sheets { Tutorial : Horizontal-Navigation mit gleitenden Hintergründen }
Tabbed Navigation Using CSS

 

[gbst51sc]

Vielen Dank für das Tutorial,

bekommt man den Spaß auch irgendwie hin, wenn JavaScript deaktiviert ist?

 

[Tronjer]

bekommt man den Spaß auch irgendwie hin, wenn JavaScript deaktiviert ist?

Mit PHP und einem Seitenrefresh. CSS kennt lediglich Hover, aber kein Klick-Event.

 

[Cheffchen]

Hallo,

wenn JavaScript deaktiviert ist?

wie kommst auf so eine absurde idee :O).
die drei die sich die mühe machen das zu deaktivieren sind echt selber schuld und verdienen nichts zu sehen :O).

Cheffchen

 

[bdt600]

die drei die sich die mühe machen das zu deaktivieren sind echt selber schuld und verdienen nichts zu sehen

Tolle Aussage :( Eine Seite muss funktionstüchtig bleiben, auch wenn JavaScript abgeschaltet ist. Bei einer kleinen Privatseite mag das ja noch gehen, aber sollte es sich um eine kommerzielle Seite handeln, ist das ein absoluten No-Go

 

[nipos]

fertigcode gefällig:?:Ganz ohne onclick also Javascript ist es nicht möglich ohne die Seite neu zu laden:!er mit Javascript steht hier:

<input type="button" onclick="document.getElementById('inhalt1').style.visibility='visible';document.getElementById('inhalt2').style.visibility='hidden';document.getElementById('inhalt3').style.visibility='hidden';" value="inhalt1"><input type="button" onclick="document.getElementById('inhalt1').style.visibility='hidden';document.getElementById('inhalt2').style.visibility='visible';document.getElementById('inhalt3').style.visibility='hidden';" value="inhalt1"><input type="button" onclick="document.getElementById('inhalt1').style.visibility='hidden';document.getElementById('inhalt2').style.visibility='hidden';document.getElementById('inhalt3').style.visibility='visible';" value="inhalt1"><div style="background-color:#ff0000;width:100;height:100;visibility:hidden" id="inhalt1"></div><div style="background-color:#00ff00;width:100;height:100;;visibility:hidden" id="inhalt2"></div><div style="background-color:#0000ff;width:100;height:100;;visibility:hidden" id="inhalt3"</div>

ist der OK:?:

 

[Banana_Jones]

fertigcode gefällig:?:Ganz ohne onclick also Javascript ist es nicht möglich ohne die Seite neu zu laden:!er mit Javascript steht hier:

<input type="button" onclick="document.getElementById('inhalt1').style.visibility='visible';document.getElementById('inhalt2').style.visibility='hidden';document.getElementById('inhalt3').style.visibility='hidden';" value="inhalt1"><input type="button" onclick="document.getElementById('inhalt1').style.visibility='hidden';document.getElementById('inhalt2').style.visibility='visible';document.getElementById('inhalt3').style.visibility='hidden';" value="inhalt1"><input type="button" onclick="document.getElementById('inhalt1').style.visibility='hidden';document.getElementById('inhalt2').style.visibility='hidden';document.getElementById('inhalt3').style.visibility='visible';" value="inhalt1"><div style="background-color:#ff0000;width:100;height:100;visibility:hidden" id="inhalt1"></div><div style="background-color:#00ff00;width:100;height:100;;visibility:hidden" id="inhalt2"></div><div style="background-color:#0000ff;width:100;height:100;;visibility:hidden" id="inhalt3"</div>

ist der OK:?:

Wenn die Absicht ist, den non-JS-Fallback möglichst umständlich zu gestalten, ja.

 

[Cheffchen]

Wieder hallo @bdt600,

ah, vor paar jahren hätte ich das genau so gesehen, aber heute ist das mehr wunschdenken als realität.

Mal erlich wer schaltet das ab ausser ein paar die halt testen wollen wie eine Seite ohne JS aussieht :O).

Cheffchen

 

[Banana_Jones]

Wieder hallo @bdt600,

ah, vor paar jahren hätte ich das genau so gesehen, aber heute ist das mehr wunschdenken als realität.

Mal erlich wer schaltet das ab ausser ein paar die halt testen wollen wie eine Seite ohne JS aussieht :O).

Cheffchen

Durch div. AdBlocker und NoScript-Geschichten geht schon mal das ein oder andere benötigte Skript nicht durch den Filter. Da muss JS nicht mal vollständig abgeschalten sein.

Insgesamt zählen Statistiken ca 3%. Trotzdem bin ich ebenfalls der Meinung, dass es einen funktionierenden Fallback geben muss. Dieser muss nicht den gleichen Komfort wie die JS-Version bieten, er muss auch optisch nicht so schön sein, aber er muss funktionieren.

Denn 3% der Besucher sind immernoch 3% der potentiellen Kunden, und je nach Business mitunter die Kernkundschaft...

 

[threadi]

Mit PHP und einem Seitenrefresh. CSS kennt lediglich Hover, aber kein Klick-Event.

Schau dir mal die Pseudoklasse target an - damit könnte man theoretisch das nachbauen was manch andere Seiten zum Abfangen von Klicks mit JavaScript machen. Wird leider nur von wenigen Browsern unterstützt.

Tolle Aussage :( Eine Seite muss funktionstüchtig bleiben, auch wenn JavaScript abgeschaltet ist.

Muss nicht. Ich handhabe das meist so, dass zumindest Bestellprozesse auch ohne JavaScript gehen müssen (weil das auch rechtlich relevant sein kann). Alles andere kann optional sein, wobei es heute durchaus auch mit purem CSS mehr Möglichkeiten gibt als man im ersten Moment denkt ;)