mit JavaScript css-Boxen ein und ausblenden

[jmaker]

Ich möchte mit CSS und JavaScript ein Menu erstellen, bei dem Duch Klicken auf einen der Links sich eine Box öffnet und die vorhandene Box an gleicher Stelle ersetzt.

Bisher muss man die Boxen einzeln aus- und einblenden.
Wie muss die Funktion verändert werden, damit bei einem Klick gleichzeitig die eine Box ausgeblendet und die neue eingeblendet wird?
(vom Prinzip her wie hier: http://validator.w3.org/)

Code: Alles auswählen

.links1
{
...
display:block;
}

.links2
{
...
display:none;
}

<script type="text/javascript">

function ShowHide&#40;id&#41;&#123;
    obj = document.getElementsByTagName&#40;"div"&#41;;
    if &#40;obj&#91;id&#93;.style.display == 'block'&#41;&#123;obj&#91;id&#93;.style.display = 'none';&#125;
    else &#123;obj&#91;id&#93;.style.display = 'block';&#125;
&#125;
</script>


<a href="javascript&#58;ShowHide2&#40;'links1', 'links2'&#41;">links1 | </a>
<a href="javascript&#58;ShowHide2&#40;'links2'&#41;">links2</a>

<div class="links1" id="links1">
<a href="#link1">link1</a><br clear="all">
<a href="#link1">link1</a><br clear="all">
</div>



<div class="links2" id="links2">
<a href="#link2">link2</a><br clear="all">
<a href="#link2">link2</a><br clear="all">
</div>

[jmaker]

habe selbst schon was dazu gefunden.
funktioniert einwandfrei.

Code: Alles auswählen

<script type="text/javascript">

reiter = new Array&#40;"reiter0","reiter1","reiter2","reiter3"&#41;;
content = new Array&#40;"Reiter01","Reiter02", "Reiter03","Reiter04"&#41;;
var aktiv = "";

function Bildwechsel&#40;aktiv,nummer&#41; &#123;
	for &#40;var i=0; i < reiter.length; ++i&#41;&#123;
		var nodeHide = content&#91;i&#93;;
		document.getElementById&#40;nodeHide&#41;.style.display = "none";
	&#125;
var nodeShow = content&#91;nummer&#93;;
document.getElementById&#40;nodeShow&#41;.style.display = "block";
&#125;
</script>

[jmaker]

Wie kann ich es erreichen, dass der Hintergrund der Linkbox dauerhaft eine andere Hintergrundfarbe annimmt, wenn ich den Bereich mit der Maus wieder verlasse?
Lösung ist per Hintergrundfarbe oder Bild gedacht.

Code: Alles auswählen

function switchbox(aktiv,nummer) {
	for &#40;var i=0; i < reiter.length; ++i&#41;&#123;
		var nodeHide = content&#91;i&#93;;
		document.getElementById&#40;nodeHide&#41;.style.display = "none";
		&#125;
	var nodeShow = content&#91;nummer&#93;;
	document.getElementById&#40;nodeShow&#41;.style.display = "block";
&#125;
</script>

<div class="link1"><a class="unavi" id="ulink1" href="javascript&#58;switchbox&#40;'link1',0&#41;" onmouseover="switchbox&#40;'link1',0&#41;"> link1 </a></div>
<div class="ink2"><a class="unavi" id="ulink2" href="javascript&#58;switchbox&#40;'link2',1&#41;" onmouseover="switchbox&#40;'link2',1&#41;"> link2</a></div>

<div class="ubox2" id="ubox1" style="display&#58; block;">
...
</div>
<div class="ubox2" id="ubox2" style="display&#58; none;">
...
</div>