Website Content per Klick ein- und ausblenden?

[excarmulo]

Hallo Community, mal wieder eine Frage an euch...

Ich habe eine Seite mit 4 Menüpunkten.. Jetzt will ich, da der Content recht klein ist, aber nicht das er jedesmal ne neue Seite lädt, sondern den jeweiligen Content einfach nur bei klick auf den entsprechenden menüpunkt einblenden ( div? ) und bei wiederholtem Klick auf den Menüpunkt wieder ausblenden. Der Content umfasst Bilder & Tabellen, nix aufwendiges.

habt ihr ne einfache schnelle idee

danke euch vielmals!
gruß

 

[Niederbobi]

<script>
var status = true;
var toggle = function()
{
status = !status;
//display von ("foo") auf status setzen
return undefined;
}
</script>

<a href="javascript:toggle()">ein/ausblenden</a>
<div id="foo" style="display:block|none"> ... </div>

Wie du den style per JS setzt, kannste direkt bei SelfHTML nachlesen.

Dirk

 

[soyo]

Ich würde bei Navigation und anderen wichtigen Sachen kein JavaScript benutzen. Weil es doch noch Leute gibt, auch wenn es nicht sehr viele sind, die JavaScript deaktiviert haben. Deine Vorhaben wäre sicherlich auch nur mit CSS zu realisieren.

 

[Maik]

@soyo: Wie willst du denn Seiteninhalte nur mit CSS und ohne eine Scriptsprache dynamisch ein- und ausblenden?

 

[d2wap]

Also ich würde in diesem Fall AJAX verwenden.
Es ist elegant (da der Seiteninhalt praktisch ja schon beim Laden der Seite mitgeladen wird und nur beim Klick die Ansicht der DIVs geändert wird) und einfach zu handhaben.
Die Alternative hierzu wäre ein IFRAME oder eben – als Notlösung – das Aufbauen der Seite in Frames.

Infos zu AJAX: http://ajaxpatterns.org/On-Demand_Javascript
Infos zu IFRAMES: http://de.selfhtml.org/html/frames/eingebettete.htm

 

[m_petersen]

Du kannst auch einen <div> definieren, und den Inhalt per innerHTML austauschen, z.B.:

<script>
var content[] = new Array();
content[0] = "<img src='test.jpg'/><h1>Toll!</h1>";
content[1] = "<p>Hello World!</p>";
// usw...

functions setContent(x) {
    document.getElementById["content_div"].innerHTML = content[x];
}
</script>
...
<a href="javascript:setContent(0)">Menü 1</a>
<a href="javascript:setContent(1)">Menü 2</a>
...
<div id="content_div"></div>

 

[Niederbobi]

@soyo: Wie willst du denn Seiteninhalte nur mit CSS und ohne eine Scriptsprache dynamisch ein- und ausblenden?

onMouseOver könnte ich mir noch vorstellen, aber auf das Klicken per css reagieren, das würde micht auch mal interessieren ...

Dirk

 

[d2wap]

Also CSS ein bzw. ausblenden geht.. aber nur mit servergesteuerten Seiten..
Man kann mit ASP/PHP mit einem Button oder Klick die Seite neu laden lassen und je nach übergebenem Parameter die CSS-Einbindung aktivieren oder deaktivieren.
Aber „live“ ohne Neuladen CSS zu aktivieren oder zu deaktivieren ist meines Wissens nicht möglich…

 

[Niederbobi]

Okay - das stimmt soweit .. hilft aber leider für das Prob nicht, weil ..

Ich habe eine Seite mit 4 Menüpunkten.. Jetzt will ich, da der Content recht klein ist, aber nicht das er jedesmal ne neue Seite lädt, sondern den jeweiligen Content ...

Dirk

 

[Maik]

Hi!

Also CSS ein bzw. ausblenden geht.. aber nur mit servergesteuerten Seiten..
Man kann mit ASP/PHP mit einem Button oder Klick die Seite neu laden lassen und je nach übergebenem Parameter die CSS-Einbindung aktivieren oder deaktivieren.
Aber „live“ ohne Neuladen CSS zu aktivieren oder zu deaktivieren ist meines Wissens nicht möglich…

Es geht hier nicht darum, CSS in einem Dokument ein- und auszublenden (aktivieren / deaktivieren), sondern Seiteninhalte beim Klick auf einen Menüpunkt dynamisch ein- und auszublenden. Und das ist mit CSS alleine nicht möglich.