Page 1 of 1

mit JavaScript css-Boxen ein und ausblenden

Posted: 16. Mar 2008 18:10
by 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: Select all

.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>

Posted: 16. Mar 2008 22:40
by jmaker
habe selbst schon was dazu gefunden.
funktioniert einwandfrei.

Code: Select all

<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>

Posted: 22. Mar 2008 14:05
by 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: Select all

function switchbox&#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>

<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>