Webmaster Forum -> Hilfe für Webmaster -> CSS
Antwort schreiben -
Benutzername
Titel
Nachrichtentext

Smilies
Very Happy Smile Sad Surprised
Shocked Confused Cool Laughing
Mad Razz Embarassed Crying or Very sad
Evil or Very Mad Twisted Evil Rolling Eyes Wink
Exclamation Question Arrow Neutral
Weitere Smilies ansehen
 Schriftfarbe:  Schriftgröße: Tags schließen
Optionen
HTML ist aus
BBCode ist an
Smilies sind an
BBCode in diesem Beitrag deaktivieren
Smilies in diesem Beitrag deaktivieren
Sicherheitscode Sicherheitscode 
 
Alle Zeiten sind GMT + 1 Stunde
Gehe zu:  
Thema-Überblick
Autor Nachricht
Werner
BeitragVerfasst am: 28 Jan 2012 19:47    Titel:
Das folgende JavaScript öffnet nur den angeklickten DIV-Block
alle anderen werden automatisch geschlossen.

Code:
<script type="text/javascript">
function zeige(ID) {

 for (var zaehler = 1; zaehler <= 5; zaehler++) {
  if (document.getElementById("u" + zaehler).style.display == "block") {
   document.getElementById("u" + zaehler).style.display = "none";
  }
 }
 document.getElementById(ID).style.display = "block";
}
</script>

» <a href="javascript:zeige('u1');"> 1 anzeigen </a> <br>
<div style="display: none;" id="u1">
   Viel Text viel text viel text ...
</div>

» <a href="javascript:zeige('u2');"> 2 anzeigen </a> <br>
<div style="display: none;" id="u2">
   Viel Text viel text viel text ...
</div>

» <a href="javascript:zeige('u3');"> 3 anzeigen </a> <br>
<div style="display: none;" id="u3">
   Viel Text viel text viel text ...
</div>

» <a href="javascript:zeige('u4');"> 4 anzeigen </a> <br>
<div style="display: none;" id="u4">
   Viel Text viel text viel text ...
</div>

» <a href="javascript:zeige('u5');"> 5 anzeigen </a> <br>
<div style="display: none;" id="u5">
   Viel Text viel text viel text ...
</div>
Pixelschubser
BeitragVerfasst am: 27 Jan 2012 11:37    Titel: Schliessen hinzufügen
@Werner

Danke für das effiziente Script!

Wie kann ich denn den einzelnen divs, also zum Beispiel
Code:

<div id="1" style="display: none;"> Inhalt 1.... </div>

einen schließen Button einfügen, um den div direkt darüber wieder auszublenden und nicht nur wenn ich einen neuen div aktiviere?

Vielen Dank im voraus
Matthias
hona
BeitragVerfasst am: 11 Dez 2010 23:48    Titel: super script, aber eine frage
Ich finde euer script hier super! ich habe es auch eingebaut. aber ich habe eine frage.

ich würde gerne einen div bereich von anfang an anzeigen, aber das kriege ich irgendwie nicht hin Sad

und dann würde ich gerne haben, dass man alle divs zumachen kann, also wenn eins offen ist, nochmal drauf klicken und es ist zu.

ich hoffe ihr versteht meine fragen!

danke!

fabian
mikeda
BeitragVerfasst am: 21 Okt 2010 09:31    Titel: ersten eintrag anzeigen
Hallo,
ich finde dieses Script super und es ist genau das was ich gesucht hatte.

Kann mir bitte einer helfen? Ich möchte das Script so einsetzen das ein kleiner Text direkt Sichtbar ist und nach klick auf den ersten Button (Link) ersetzt wird. Ist das machbar?

Für eine Hilfe wäre ich sehr dankbar.
Werner
BeitragVerfasst am: 21 Dez 2009 11:01    Titel:
Anstatt die Funktion über einen Link-Klick aufzurufen
(es wird immer ein interner Seitenlink aufgerufen href="#"),
kann man auch den SPAN-Tag verwenden:
Code:
<head><TITLE>Test</TITLE>

<style type="text/css">
.link {
 color: #0000FF;
 cursor: pointer;
}
</style>

</head>
<body>
<script type="text/javascript">
var angeschaltet = 0;
function anzeigen(das){
 if(angeschaltet != 0)
  document.getElementById(angeschaltet).style.display='none';
 if(document.getElementById(das).style.display=='none')
  document.getElementById(das).style.display='block';
 else
  document.getElementById(das).style.display='none';
 angeschaltet= das;
}
</script>

<span class="link" onclick="anzeigen('1')">BUTTON 1</span>
<span class="link" onclick="anzeigen('2')">BUTTON 2</span>
<span class="link" onclick="anzeigen('3')">BUTTON 3</span>

<div id="1" style="display: none;"> Inhalt 1.... </div>
<div id="2" style="display: none;"> Inhalt 2.... </div>
<div id="3" style="display: none;"> Inhalt 3.... </div>
</body>
Gast
BeitragVerfasst am: 20 Dez 2009 18:55    Titel:
Hier eine neue Version und getestet:
Code:
<head><TITLE>Test</TITLE></head>
<body>
<script type="text/javascript">
var angeschaltet = 0;
function anzeigen(das){
 if(angeschaltet != 0)
  document.getElementById(angeschaltet).style.display='none';
 if(document.getElementById(das).style.display=='none')
  document.getElementById(das).style.display='block';
 else
  document.getElementById(das).style.display='none';
 angeschaltet= das;
}
</script>

<a href="#" onclick="anzeigen('1')">BUTTON 1</a>
<a href="#" onclick="anzeigen('2')">BUTTON 2</a>
<a href="#" onclick="anzeigen('3')">BUTTON 3</a>

<div id="1" style="display: none;"> Inhalt 1.... </div>
<div id="2" style="display: none;"> Inhalt 2.... </div>
<div id="3" style="display: none;"> Inhalt 3.... </div>
</body>

Nur der Inhalt des geklickten Links oder Buttons wird angezeigt und das vorher Geklickte wird wieder ausgeblendet.
GAST
BeitragVerfasst am: 01 Apr 2009 17:25    Titel: Mach´s nicht so kompli
Das ist viel zu kompliziert!
Machs einfacher!
Gast
BeitragVerfasst am: 12 März 2009 12:30    Titel:
funktioniert leider nicht
V4hn
BeitragVerfasst am: 28 Mai 2008 22:29    Titel:
ungetestet aber (hoffentlich) funktionstuechtig:
Code:
<script type="text/javascript">
var angeschaltet = 0;
function anzeigen(das){
 if(angeschaltet != 0)
  document.getElementById(angeschaltet).style.display='none';
 if(document.getElementById(das).style.display=='none')
  document.getElementById(das).style.display='block';
 else
  document.getElementById(das).style.display='none';}
 angeschaltet= das;
</script>

<a href="#" onclick="anzeigen('1')">BUTTON 1</a>
<a href="#" onclick="anzeigen('2')">BUTTON 2</a>
<a href="#" onclick="anzeigen('3')">BUTTON 3</a>

<div id="1" style="display: none;"> Inhalt 1.... </div>
<div id="2" style="display: none;"> Inhalt 2.... </div>
<div id="3" style="display: none;"> Inhalt 3.... </div>
a-flow
BeitragVerfasst am: 28 Mai 2008 15:09    Titel:
Der Code von Werner hilft mir schon weiter, allerdings möchte ich diesen erweiter...

Mein Menü besteht aus 3 Buttons:

BUTTON 1 - BUTTON 2 - BUTTON 3

Content: Button 1
Content: Button 2
Content: Button 3

Jetzt geht es darum den Inhalt zum jeweiligen Button anzuzeigen, wenn man auf diesen daru klickt. Beim Klick auf einen anderen Button sollte sich der zuvor geöffnete Inhalt wieder schließen, was er bisher aber nicht tut.
Content: Button 1
Content: Button 2
Content: Button 3


Code:
<script type="text/javascript">
 function anzeigen(das){
 if(document.getElementById(das).style.display=='none')
 document.getElementById(das).style.display='block';
 else document.getElementById(das).style.display='none';}
</script>

<a href="#" onclick="anzeigen('1')">BUTTON 1</a>
<a href="#" onclick="anzeigen('2')">BUTTON 2</a>
<a href="#" onclick="anzeigen('3')">BUTTON 3</a>

<div id="1" style="display: none;"> Inhalt 1.... </div>
<div id="2" style="display: none;"> Inhalt 2.... </div>
<div id="3" style="display: none;"> Inhalt 3.... </div>


Kann da jemand weiterhelfen???