Pro-Linux.de

Pro-Linux

Pro-Linux Diskussions- und Hilfeforum
Aktuelle Zeit: 20. Nov 2018 22:32

Alle Zeiten sind UTC+01:00




Ein neues Thema erstellen  Auf das Thema antworten  [ 3 Beiträge ] 
Autor Nachricht
BeitragVerfasst: 16. Mär 2008 18:10 
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:
.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>


Nach oben
   
 Betreff des Beitrags:
BeitragVerfasst: 16. Mär 2008 22:40 
habe selbst schon was dazu gefunden.
funktioniert einwandfrei.
Code:
<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>


Nach oben
   
 Betreff des Beitrags:
BeitragVerfasst: 22. Mär 2008 14:05 
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:
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>


Nach oben
   
Beiträge der letzten Zeit anzeigen:  Sortiere nach  
Ein neues Thema erstellen  Auf das Thema antworten  [ 3 Beiträge ] 

Alle Zeiten sind UTC+01:00


Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 0 Gäste


Sie dürfen keine neuen Themen in diesem Forum erstellen.
Sie dürfen keine Antworten zu Themen in diesem Forum erstellen.
Sie dürfen Ihre Beiträge in diesem Forum nicht ändern.
Sie dürfen Ihre Beiträge in diesem Forum nicht löschen.
Sie dürfen keine Dateianhänge in diesem Forum erstellen.

Suche nach:
Gehe zu:  
cron
Powered by phpBB® Forum Software © phpBB Limited
Deutsche Übersetzung durch phpBB.de