div-Layer ein/ausblenden


 
Neues Thema eröffnen   Neue Antwort erstellen    Webmaster Forum -> Hilfe für Webmaster -> CSS
Vorheriges Thema anzeigen :: Nächstes Thema anzeigen  
Autor Nachricht
Gast
Beitragdiv-Layer ein/ausblenden Antworten mit Zitat
Wie kann ich div-Layer ein- und ausblenden ohne dabei PHP oder ähnliches zu verwenden?
03 Okt 2005 21:37
Belgarath
Mitglied
Beitrag Antworten mit Zitat
javascript



kurze frage, kurze antwort Confused
03 Okt 2005 22:14
Benutzer-Profile anzeigen Private Nachricht senden
Werner
Homepage-Total.de
Moderator
Beitrag Antworten mit Zitat
Hier folgt ein JavaScript-Beispiel:

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('eins')">Ein / Aus</a>

<span id="eins" style="display: none;"> Inhalt .... </span>

_________________
Bei Fragen oder Fehlermeldungen - Bitte ausführlichen Code posten!
Wie man Fragen richtig stellt
04 Okt 2005 18:35
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen
David
Administrator
Beitrag Antworten mit Zitat
Beide Moderatoren, und zwei unterschiedliche Antworten. Da stellt man sich schon einige Fragen als Administrator Wink

Zum Thema. Das bringt mich glatt auf eine gute Idee 4 My Page. Da ich keinen News-Bereich habe (finde einfach nicht wirklich Platz dafür), ist auch nicht sehr benutzerfreundlich. Man wird einfach nicht informiert, wenn etwas Neues auf der Homape ist.

Könnte man es evtl. mit einem schönen Einblendeeffekt versehen. Habe es gerade bei einer neuen Wiki Software gesehen. Ist zwar kein Muss. Wenn es aber nicht so umständlich ist, würde ich es gerne einbauen.

Hast du da was parat, Werner?

_________________
MfG David Mirzoian
axinio Internet Marketing - professionelle Suchmaschinenoptimierung
04 Okt 2005 22:51
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen
a-flow
Gast
Beitrag Antworten mit Zitat
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???
28 Mai 2008 16:09
V4hn
Moderator
Beitrag Antworten mit Zitat
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>

_________________
28 Mai 2008 23:29
Benutzer-Profile anzeigen Private Nachricht senden E-Mail senden Website dieses Benutzers besuchen
Gast
Beitrag Antworten mit Zitat
funktioniert leider nicht
12 März 2009 13:30
GAST
Gast
BeitragMach´s nicht so kompli Antworten mit Zitat
Das ist viel zu kompliziert!
Machs einfacher!
01 Apr 2009 18:25
Gast
Beitrag Antworten mit Zitat
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.
20 Dez 2009 19:55
Werner
Homepage-Total.de
Moderator
Beitrag Antworten mit Zitat
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>

_________________
Bei Fragen oder Fehlermeldungen - Bitte ausführlichen Code posten!
Wie man Fragen richtig stellt
21 Dez 2009 12:01
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen
axinio Internet Marketing
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    Webmaster Forum -> Hilfe für Webmaster -> CSS Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehe zu:  

Ähnliche Beiträge
Thema Webmaster Forum Antw. Autor Verfasst am
Keine neuen Beiträge mehre div layer einblenen und ausblenden CSS 1 vayu 02 Mai 2010 04:59 Letzten Beitrag anzeigen
Keine neuen Beiträge Layer automatisch ausblenden Javascript 0 iuna123 15 März 2010 11:17 Letzten Beitrag anzeigen
Keine neuen Beiträge Wenn Feld (Text81) 0,00 dann leer ode... Javascript 0 Gast 07 Aug 2009 10:17 Letzten Beitrag anzeigen
Keine neuen Beiträge Hilfe bei JavaScript Layer AD Script Javascript 3 Kevin_O 11 Sep 2007 14:36 Letzten Beitrag anzeigen
Keine neuen Beiträge div-Layer einheitlich positionieren CSS 3 David 25 Okt 2005 09:42 Letzten Beitrag anzeigen