div Container ein/ausblenden

[fellfresse]

hallo,
dieses Thema wurde schon häufig beschrieben, leider nicht in der Variante wie ich es gerne umsetzen möchte. Und da ich gerade anfange JS zu coden suche ich hier mal hilfe.

was ich vorhabe:
ich habe eine div-box in der ich jeh nach klick einen anderen inhalt anzeigen möchte. (beschrieben wird immer die variante das eine neue box angezeigt wird und sich der nachfolgende text verschiebt. das soll aber nicht so.
hier mal mein html:

<div>
  <div id="auswahl">auswahlbutton</div>
  <div id="liste">liste</div>
  <div id="map">karte</div>
</div>

das css:

div#auswahl
{
  width: 100%;
  height: 30px;
}
div#liste
{
  width: 200px;
  height: 100%;
  float: left;
}
div#map
{
  width: 550px;
  height: 100%;
  float: left;
}

so und nun möchte ich einen zweiten div-container, der abwechselnd mit dem "liste" container gewechselt wird, er muss dann aber an genau der gleichen stelle stehen!

is das umsetzbar?

mfg

 

[Alti]

Vllt hilft das?

http://www.meine-erste-homepage.com/css-popup.php

 

[flapo]

Ich würde das spntan mal so machen:

<div id="myDIV">
  <a href="#">auswahlbutton<span>Text der beim Klick angezeigt werden soll...</span></a>
  <a href="#">liste<span>Text der beim Klick angezeigt werden soll...</span></a>
  <a href="#">karte<span>Text der beim Klick angezeigt werden soll...</span></a>
</div>

CSS dazu:

#myDIV a span {display:none;}
#myDIV a:focus span {display:block; position:absolute; left:?px; top?px;}
#myDIV a:active span {display:block; position:absolute; left:?px; top?px;}

Musst das halt mal ausprobieren, ob das das ist, was du willst.

 

[Commodore]

öhm mal ne kleiner frage an beidflapo:

er hat das ganze doch hier im js-bereich gepostet, da will er bestimmt keine css lösung (die funktioniert doch nicht im ie, oder?) ;-)

also mit js würd ichs so machen:

<div id="auswahl" onClick="this.firstChild.nodeValue='auswahlbutton, text der neu ist';">auswahlbuton</div>

(nicht getestet)

wenn du innerhalb des divs auch noch links o.ä. reinmachen willst, bei denen html umgewandelt werden soll musst du innerHTML statt firstChild.nodeValue benutzen (hat den nachteilö, dass es kein dom-standard ist, und daher nur ab ie 4.0, opera 5.0, netscape 6.0 oder mozilla 1.x funkcitoniert) oder verstehe ich die frage falsch?

 

[flapo]

er hat das ganze doch hier im js-bereich gepostet, da will er bestimmt keine css lösung (die funktioniert doch nicht im ie, oder?) ;-)

Bedauerlich, dass ich dich da enttäuschen muss. :lol: Funktioniert auch im IE. Und wenns im IE funktioniert, ist CSS immer JavaScript vorzuziehen. Kann sein, dass es mit JS "geschmeidiger" läuft...

 

[fellfresse]

danke schon mal für eure antworten!

mit ein bißchen nachdenken und einer weiteren anleitung habe ich nun erstmal folgendes geschaftt:
http://fellfresse.fe.ohost.de/test.htm
(quellcode is damit online einzusehen)

wenn man auf den link klickt, dann erscheint nun schon die alternative box. aber nun brauche ich zusätzlich eine erweiterung der funktion in dem die erste box auf display: none geschaltet wird.

kann mir da jemand von euch weiter helfen?

mfg

 

[mfeesche]

eine frage:
kannste bei Javascript nicht auch zwei Variablem übergeben?

onClick="javascript:toggledisplay('route,liste')

und dann einfach beide elemente toggeln?

ein gedankenanstoss

 

[fellfresse]

so,
ich bin nun ein stück weiter.
http://fellfresse.fe.ohost.de/test.htm
die umschaltung funktioniert nun so wie ich es haben will, aber es besteht noch ein kleiner schönheitsfehler. und zwar schaltet es erst nach dem zweiten klick um und nich wie es soll gleich bei dem ersten klick.

woran kann das nun liegen?

mfg

 

[fellfresse]

hab es selbst heraus gefunden.
es fehlte ein style="display:block;" im html code.

danke an alle die zur lösung beigetragen haben!