Show und Hide von divs

[Colafreak]

Hallo =)

Ich versuche schon seid ein paar Tagen folgendes zu schaffen:

Man hat 3 divs die alle gleich breit sind aber unterschiedlich hoch. Div1 Div2 und Div3. Und man soll immer nur einen sehen. In jedem Div sind 2 Links.

Div1:
- Link show Div2
- Link show Div3

Div2:
- Link show Div1
- Link show Div3

Div3:
- Link show Div1
- Link show Div2

Im quelltext sind die 3 divs vorhanden aber der erste ist visible und die anderen beiden hidden. und wenn man jetzt im div1 auf den link "div2" klickt soll der den hide befehl für div eins und den show bzw. visible befehl für div2 ausführen. Das also immer nur einer von den 3 divs angezeigt wird und wenn man einen anderen div angezeigt haben möchte versteckt der den aktuellen und zeigt den gewünschten an.

Ist ein bisschen kompliziert, ich weiss aber nicht wie ich es sonst erklären soll ^^

ich hoffe mir kann jemand helfen,

Mfg, colafreak

PS: wenn jemand eine andere möglichkeit hat (z.B mit php) mit dem selben ergebnis ist das auch nicht schlimm. ist eigentlich egal wie, hauptsache es funktioniert.

 

[Frank]

JavaScript

function show(id)
{
  var ids = new Array()
  ids[] = 'div1'
  ids[] = 'div2'
  ids[] = 'div3'
  for(i=0;i<ids.length;i++)
  {
    document.getElementById(ids[i]).style.display = 'none'
  }
  document.getElementById(id).style.display = 'block'
}

HTML

<div id="div1">
  <a href="javascript:show('div2')">Div 2 anzeigen</a><br>
  <a href="javascript:show('div3')">Div 3 anzeigen</a>
</div>

<div id="div2">
  <a href="javascript:show('div1')">Div 1 anzeigen</a><br>
  <a href="javascript:show('div3')">Div 3 anzeigen</a>
</div>

<div id="div3">
  <a href="javascript:show('div1')">Div 1 anzeigen</a><br>
  <a href="javascript:show('div2')">Div 2 anzeigen</a>
</div>

 

[Colafreak]

Danke. Aber der zeigt immer alle 3 divs an. Es soll immer nur ein div angezeigt werden. Und dann eben mit den links bestimmen welcher.

 

[Frank]

hier hab nochmal was dran verändert

<script type="text/javascript">
<!--
function show(id)
{
  var ids = new Array('div1','div2','div3')
  for(i=0;i<ids.length;i++)
  {
    document.getElementById(ids[i]).style.display = 'none'
  }
  document.getElementById(id).style.display = 'block'
}
-->
</script>
<style type="text/css">
<!--
#div1,#div2,#div3
{
  display:none;
}
#div1
{
  display:block;
}
-->
</style>
<div id="div1">
  <a href="javascript:show('div2')">Div 2 anzeigen</a><br>
  <a href="javascript:show('div3')">Div 3 anzeigen</a>
</div>

<div id="div2">
  <a href="javascript:show('div1')">Div 1 anzeigen</a><br>
  <a href="javascript:show('div3')">Div 3 anzeigen</a>
</div>

<div id="div3">
  <a href="javascript:show('div1')">Div 1 anzeigen</a><br>
  <a href="javascript:show('div2')">Div 2 anzeigen</a>
</div>

war ein syntaxfehler drin, deshalb gings net^^

 

[Colafreak]

riesen dankeschön, klappt wunderbar. endlich mal ein forum in dem man ordentlichen und schnellen support etc. bekommen. thx *daumen hoch*

MERGED

hi, nochmal danke klappt immer noch nur jetzt hab ich ein problem. ich habe 2 stellen auf der seite wo divs geändert werden. wenn ich im 2. bereich einen div ändern will geht der erste weg weil der ja denkt das wär einer. kann man das noch irgendwie ändern?