Auf- und Zuklappen
- Themenstarter msycho
- Beginndatum
Niederbobi
Erfahrenes Mitglied
<a href="javascript: do(...)">..</a> var do = function( ... ) { ... ; return undefined; } ... sry - ich kann keine Zeilenumbruch machen ..
// Dirk
M
Maik
Tut mir leid, aber das Script läuft in allen mir zur Verfügung stehenden Browsern einwandfrei, und keiner wirft da eine Fehlermeldung aus.
Das ist der vollständige Quellcode meines Testdokuments:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>
<script type="text/javascript">
<!--
function show(id) {
var bild = 'bild' + id;
if (document.getElementById(id).style.display == "none") {
document.getElementById(id).style.display = "inline";
document.getElementById(bild).src = "minus.gif";
}
else {
document.getElementById(id).style.display = "none";
document.getElementById(bild).src = "plus.gif";
}
}
//-->
</script>
</head>
<body>
<a href="#" onclick="show('stats');return false;"><img src="minus.gif" id="bildstats">Ein-/Ausblenden</a>
<table border="1" cellspacing="0" cellpadding="0" width="100%" id="stats" style="display:none;">
<tr>
<td>test</td>
</tr>
</table>
</body>
</html>Hier mal mein Code:
Im FF wird das Bild nicht gewechselt. Im IE passiert nichts, also nichts mit Auf- und Zuklappen.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>
<script type="text/javascript">
<!--
function show(id) {
var bild = 'bild' + id;
if (document.getElementById(id).style.display == "none") {
document.getElementById(id).style.display = "inline";
document.getElementById(bild).src = "minus.gif";
}
else {
document.getElementById(id).style.display = "none";
document.getElementById(bild).src = "plus.gif";
}
}
//-->
</script>
</head>
<body>
<table cellpadding="4" cellspacing="1" border="0" width="100%">
<tr>
<td style="border-top:1px solid #5A5D5A;border-bottom:1px solid #5A5D5A;background:#ccccc;">
<font class="small"><b><a name="forumstats">Stats</a></b> <a href="#forumstats" onclick="show('forumstats');return false;"><img id="bildstats" src="minus.gif" alt="Zu-Auf" title="Zu-Auf" /></a></font>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="forumstats" style="display:none;">
<tr>
<td>
DaDiDeDum
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Im FF wird das Bild nicht gewechselt. Im IE passiert nichts, also nichts mit Auf- und Zuklappen.
M
Maik
Zum einen hast du im img-Element einen falschen ID-Namen gesetzt, er muss bildforumstats lauten.
Der zweite Grund ist scheinbar der gleichlautende Ankername forumstats - nenne ihn also einfach mal um.
Der zweite Grund ist scheinbar der gleichlautende Ankername forumstats - nenne ihn also einfach mal um.
M
Maik
Hi,
beschäftige dich mal mit der cookie-Eigenschaft.
Ein Beispiel findest du z.B. hier -> http://christoph.ist-stylish.de/tut/newsmemory.html
beschäftige dich mal mit der cookie-Eigenschaft.
Ein Beispiel findest du z.B. hier -> http://christoph.ist-stylish.de/tut/newsmemory.html
Hallo Leute, ich habe hier folgenden Code für ein Menü aus 4 einzelnen Teilen, der auch prima funktioniert.
Was ich allerdings nicht hinkriege ist, dass beim Klick auf ein Menü eine Grafik (z.B. "+" oder "-") abhängig vom Zustand des Menüs angezeigt wird.
Klappt man sozusagen ein Menü auf, steht statt "+" ein "-". Klappt man es zu, wir der "-" zum "+".
Könnte mir bitte jemand helfen und sagen was ich an diesem Code noch ergänzen soll?
Was ich allerdings nicht hinkriege ist, dass beim Klick auf ein Menü eine Grafik (z.B. "+" oder "-") abhängig vom Zustand des Menüs angezeigt wird.
Klappt man sozusagen ein Menü auf, steht statt "+" ein "-". Klappt man es zu, wir der "-" zum "+".
Könnte mir bitte jemand helfen und sagen was ich an diesem Code noch ergänzen soll?
Code:
<html>
<head>
<title>Auswahlmenü</title>
<base target="anzeige">
<script type="text/javascript">
<!--
function show(divid) {
d=document;
if (d.getElementById(divid).style.display == 'block')
{
d.getElementById(divid).style.display='none';
}
else
{
d.getElementById('cat1').style.display='none';
d.getElementById('cat2').style.display='none';
d.getElementById('cat3').style.display='none';
d.getElementById('cat4').style.display='none';
d.getElementById(divid).style.display='block';
}
}
//-->
</script>
</head>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" link="#800000" alink="#000000" bgcolor="#FFFFFF" vlink="#800000">
<a onclick="show('cat1')">+ <b>Bands:</b></a><br>
<div id="cat1" style="display:none">
• <a href="#">Band "EarlGrey"</a><br>
• <a href="#">Band "Braumoasda"</a><br>
</div>
<a onclick="show('cat2')">+ <b>DJs:</b></a><br>
<div id="cat2" style="display:none">
• <a href="#">DJ Scream</a><br>
</div>
<a onclick="show('cat3')">+ <b>Communities:</b></a><br>
<div id="cat3" style="display:none">
• <a href="#">Nightfeaverteam</a><br>
• <a href="#">PsyLaz</a><br>
</div>
<a onclick="show('cat4')">+ <b>Andere:</b></a><br>
<div id="cat4" style="display:none">
• <a href="#">Musikfestival "JULA"</a><br>
• <a href="#">Rus. Club "Bravo"</a><br>
• <a href="#">DAB-Service</a><br>
</div>
</body>
</html>
Zuletzt bearbeitet:
Hi,
übergib der Funktion show neben der ID für die Kategorie noch das auslösende Objekt mit this.
Der Inhalt der innerHTML-Eigenschaft dieses Objektes wird dann in ein + geändert.
Weiterhin wird eine Variable zum "Merken" des vorhergehenden auslösenden Objektes erstellt. Damit
wird es möglich, Änderungen wieder zurück zu nehmen.
Ciao
Quaese
übergib der Funktion show neben der ID für die Kategorie noch das auslösende Objekt mit this.
Der Inhalt der innerHTML-Eigenschaft dieses Objektes wird dann in ein + geändert.
Weiterhin wird eine Variable zum "Merken" des vorhergehenden auslösenden Objektes erstellt. Damit
wird es möglich, Änderungen wieder zurück zu nehmen.
Code:
<html>
<head>
<title>Auswahlmenü</title>
<base target="anzeige">
<script type="text/javascript">
<!--
var objSave = null;
function show(objLink, divid) {
d=document;
if(objSave != null)
objSave.innerHTML = "+";
if (d.getElementById(divid).style.display == 'block'){
d.getElementById(divid).style.display='none';
}else{
d.getElementById('cat1').style.display='none';
d.getElementById('cat2').style.display='none';
d.getElementById('cat3').style.display='none';
d.getElementById('cat4').style.display='none';
d.getElementById(divid).style.display='block';
objLink.innerHTML = "-";
objSave = objLink;
}
}
//-->
</script>
</head>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" link="#800000" alink="#000000" bgcolor="#FFFFFF" vlink="#800000">
<a onclick="show(this, 'cat1')">+ <b>Bands:</b></a><br>
<div id="cat1" style="display:none">
• <a href="#">Band "EarlGrey"</a><br>
• <a href="#">Band "Braumoasda"</a><br>
</div>
<a onclick="show(this, 'cat2')">+ <b>DJs:</b></a><br>
<div id="cat2" style="display:none">
• <a href="#">DJ Scream</a><br>
</div>
<a onclick="show(this, 'cat3')">+ <b>Communities:</b></a><br>
<div id="cat3" style="display:none">
• <a href="#">Nightfeaverteam</a><br>
• <a href="#">PsyLaz</a><br>
</div>
<a onclick="show(this, 'cat4')">+ <b>Andere:</b></a><br>
<div id="cat4" style="display:none">
• <a href="#">Musikfestival "JULA"</a><br>
• <a href="#">Rus. Club "Bravo"</a><br>
• <a href="#">DAB-Service</a><br>
</div>
</body>
</html>Quaese
