Grafik -> Text laden

Der Plus-Selektor bedeutet, dass jedes Element was direkt nach einem Element kommt, angesprochen wird. Dementsprechend kannst du der DIV-Box eine eigene Klasse/ID geben und diese dann ansprachen. Damit verhinderst du, dass sich das auf alle DIV-Boxen bezieht, die nach einem Anker kommen.
 
Füg einfach ein div#boxes vor a + div und a:hover + div .. Die Grundlagen von CSS erklär' ich dir aber nicht, dafür gibt es genügend Referenzen, auf die du zurückgreifen kannst.
 
Verstehe ich nicht!

Die CSS-Anweisung muss so aufgebaut sein das die CSS-Anweisung nur bei diesem einem DIV-Container (oder halt DIV-Gruppe) greift.
 
Ach ich habe das total übersehen.

Was mich noch interessieren würde, wäre die Javascript funktion zu erweitern.

Code: 
<script language="JavaScript" type="text/javascript">
function einblenden(div) {
with(document.getElementById(div).style){
if(display=="none"){
display="inline";
}
else{
display="none";
}
}
}
</script>
 
Code Code Code...
Code Code Code...
Code Code Code...
 
<div id="ebene1" style="display:none;">
   Geben Sie bitte ihre E-Mail-Adresse ein.
</div>
 
<div id="ebene2" style="display:none;">
   Gebeb Sie bitte ein Passwort mit mindestens 6 Zeichen ein.
</div>
 
<div id="ebene3" style="display:none;">
   Lesen Sie sich bitte die Datunschutzbestimmung durch und klicken Sie dann auf die Chechbox.
</div>
 
<a href="#" onClick="einblenden('ebene1'); return false;">FAQ-1</a>
<br />
<a href="#" onClick="einblenden('ebene2'); return false;">FAQ-2</a>
<br />
<a href="#" onClick="einblenden('ebene3'); return false;">FAQ-3</a>

Wenn man auf "ebene1" klickt, wird "FAQ-1" angezeigt. Wenn man dann auf "ebene2" klickt, wird zusätzlich "FAQ-2" angezeigt. Das möchte ich nicht. Die anderen DIV-Container sollen dann ausgeblendet werden und nur das "aktuelle" angeklickte angezeigt werden.

Kann mir jemand dabei helfen?
 
Vom Prinzip her so:
Javascript: 
var ids = {"div1", "div2", "div3"};
function showDiv(id){
  for( i = 0; i < ids.length; i++ ){
    document.getElementById(ids[i]).style.display = (ids[i] == id)? "block" : "none";
  }
}
 
Hallo noch einmal.

Ich bin nun mit dem Javascript Code ein ganzes Stück weiter gekommen.

Jedoch fehlt noch eine Option. Wenn noch einmal auf den aktivieren Link (aktiverten DIV-Container) geklickt wird, soll sich dieser schließen.

Code: 
<script language="JavaScript" type="text/javascript">
function show_elements() {
   var elementNames = show_elements.arguments;
   for (var i=0; i<elementNames.length; i++) {
        var elementName = elementNames[i];
        document.getElementById(elementName).style.display='block';
   }
}

function hide_elements() {
   var elementNames = hide_elements.arguments;
   for (var i=0; i<elementNames.length; i++) {
        var elementName = elementNames[i];
        document.getElementById(elementName).style.display='none';
      }
}
</script>

HTML: 
<div id="ebene1" style="display:none;">
   Geben Sie bitte ihre E-Mail-Adresse ein.
</div>
 
<div id="ebene2" style="display:none;">
   Gebeb Sie bitte ein Passwort mit mindestens 6 Zeichen ein.
</div>
 
<div id="ebene3" style="display:none;">
   Lesen Sie sich bitte die Datunschutzbestimmung durch und klicken Sie dann auf die Chechbox.
</div>
 
<a href="#" title="" onclick="show_elements('ebene1');hide_elements('ebene2','ebene3')">FAQ-1</a>
<br />
<a href="#" title="" onclick="show_elements('ebene2');hide_elements('ebene1','ebene3')">FAQ-2</a>
<br />
<a href="#" title="" onclick="show_elements('ebene3');hide_elements('ebene1','ebene2')">FAQ-3</a>

Kann mir jemand hierbei helfen?
 
Speichere die letzte id ab und vergleiche sie mit der zu öffnenden id. Wenn die gleich sind, schließen ;)
Javascript: 
var last = "";
var ids = {"div1", "div2", "div3"};
function showDiv(id){
  if( last == id ){
    document.getElementById(id).style.display = "none";
     last = "";
     return;
  }
  last = id;
  for( i = 0; i < ids.length; i++ ){
    document.getElementById(ids[i]).style.display = (ids[i] == id)? "block" : "none";
  }
}
 
Ist der Code so direkt zum einbauen oder MUSS ich etwas ändern? :)

Also bei mir funktioniert der Code leider nicht.

Ich habe es nun so gemacht auch wenn ich das nicht optimal finde. Naja ich finde es eigentlich voll blöd.

Javascript: 
<script language="JavaScript" type="text/javascript">
function show_elements() {
   var elementNames = show_elements.arguments;
   for (var i=0; i<elementNames.length; i++) {
        var elementName = elementNames[i];
        document.getElementById(elementName).style.display='block';
   }
}
 
function hide_elements() {
   var elementNames = hide_elements.arguments;
   for (var i=0; i<elementNames.length; i++) {
        var elementName = elementNames[i];
        document.getElementById(elementName).style.display='none';
      }
}
</script>

HTML: 
<div id="ebene1" style="display:none;">
   Geben Sie bitte ihre E-Mail-Adresse ein.
   <br />
   <a href="#" title="" onclick="hide_elements('ebene1')">Ausblenden!</a>
   <br />
</div>
 
<div id="ebene2" style="display:none;">
   Gebeb Sie bitte ein Passwort mit mindestens 6 Zeichen ein.
   <br />
   <a href="#" title="" onclick="hide_elements('ebene2')">Ausblenden!</a>
   <br />
</div>
 
<div id="ebene3" style="display:none;">
   Lesen Sie sich bitte die Datunschutzbestimmung durch und klicken Sie dann auf die Chechbox.
   <br />
   <a href="#" title="" onclick="hide_elements('ebene3')">Ausblenden!</a>
   <br />
</div>
 
<a href="#" title="" onclick="show_elements('ebene1');hide_elements('ebene2','ebene3')">FAQ-1</a>
<br />
<a href="#" title="" onclick="show_elements('ebene2');hide_elements('ebene1','ebene3')">FAQ-2</a>
<br />
<a href="#" title="" onclick="show_elements('ebene3');hide_elements('ebene1','ebene2')">FAQ-3</a>
 
Zuletzt bearbeitet von einem Moderator:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück