Hinweis: Das Forum wird geschlossen! Neue Registrierungen sind nicht mehr möglich!

 Zurück zu Pro-Linux   Foren-Übersicht   FAQ     Suchen    Mitgliederliste
mit JavaScript css-Boxen ein und ausblenden

 
Neuen Beitrag schreiben   Auf Beitrag antworten    Pro-Linux Foren-Übersicht -> Programmieren - Allgemein
Vorheriges Thema anzeigen :: Nächstes Thema anzeigen  
Autor Nachricht
jmaker
Gast





BeitragVerfasst am: 16. März 2008 18:10   Titel: mit JavaScript css-Boxen ein und ausblenden

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(id){
    obj = document.getElementsByTagName("div");
    if (obj[id].style.display == 'block'){obj[id].style.display = 'none';}
    else {obj[id].style.display = 'block';}
}
</script>


<a href="javascript:ShowHide2('links1', 'links2')">links1 | </a>
<a href="javascript:ShowHide2('links2')">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
Gast





BeitragVerfasst am: 16. März 2008 22:40   Titel:

habe selbst schon was dazu gefunden.
funktioniert einwandfrei.

Code:

<script type="text/javascript">

reiter = new Array("reiter0","reiter1","reiter2","reiter3");
content = new Array("Reiter01","Reiter02", "Reiter03","Reiter04");
var aktiv = "";

function Bildwechsel(aktiv,nummer) {
   for (var i=0; i < reiter.length; ++i){
      var nodeHide = content[i];
      document.getElementById(nodeHide).style.display = "none";
   }
var nodeShow = content[nummer];
document.getElementById(nodeShow).style.display = "block";
}
</script>
 

jmaker
Gast





BeitragVerfasst am: 22. März 2008 14:05   Titel:

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(aktiv,nummer) {
   for (var i=0; i < reiter.length; ++i){
      var nodeHide = content[i];
      document.getElementById(nodeHide).style.display = "none";
      }
   var nodeShow = content[nummer];
   document.getElementById(nodeShow).style.display = "block";
}
</script>

<div class="link1"><a class="unavi" id="ulink1" href="javascript:switchbox('link1',0)" onmouseover="switchbox('link1',0)"> link1 </a></div>
<div class="ink2"><a class="unavi" id="ulink2" href="javascript:switchbox('link2',1)" onmouseover="switchbox('link2',1)"> link2</a></div>

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

Beiträge vom vorherigen Thema anzeigen:   
     Pro-Linux Foren-Übersicht -> Programmieren - Allgemein Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehen Sie zu:  

Powered by phpBB © phpBB Group
pro_linux Theme © 2004 by Mandaxy