nicht angemeldet
Navigationsleiste wie beim Windows Explorer
Hallo alle zusammen,
als erstes, ich habe noch keine große Erfahrung im javascript und hoffe das ihr mir helfen könnt.
Folgendes Problem:
Ich würde gern in meiner Navigationsliste ein plus(aufmachen) minus(zumachen) System, wie beim Windows Explorer, einfügen.
Für das Einblenden habe ich rausgefunden wie es funktioniert.
<html>
<head>
<style type="text/css">
#referenzen { display: none; }
</style>
<script type="text/javascript">
function referenzen() {
document.getElementById('referenzen').style.display = 'block';
}
</script>
</head>
<body>
<table>
<tr>
<td><span onclick="referenzen()">REFERENZEN</span></td>
</tr>
<tr id="referenzen">
<td>LINK</td>
</tr>
</table>
</body>
</html>
Ich möchte erreichen, wenn man noch mal auf >Referenzen< klickt, so das die 2. Zeile der Table wieder verschwindet. Das Problem ist, das ich die Syntax nicht genau kenne, gedacht habe ich es mir so:
<script type="text/javascript">
function referenzen() {
if (?id=”referenz”=none?) {
document.getElementById('referenzen').style.display = 'block';
}
else {
document.getElementById('referenzen').style.display = 'none';
}
}
</script>
jetzt lacht mich nicht aus wenn das total falsch ist xD
ich würde mich freuen, wenn mir jemand weiterhelfen kann.
Vielen Dank schon mal in voraus.
Gruß Tim.
-
Hi,
function referenzen() {
if (?id=”referenz”=none?) {
document.getElementById('referenzen').style.display = 'block';
}
else {
document.getElementById('referenzen').style.display = 'none';Grundsätzlich geht Abfragen von Eigenschaften genauso wie zuweisen - nur mit dem Vergleichsoperator == statt dem Zuweisungoperator.
Beim Abfragen von Style-Eigenschaften über das style-Objekt besteht jedoch noch die Besonderheit, dass damit nur per style-Attribut direkt am Element, oder zuvor per JavaScript gesetzte Werte ermittelt werden können.
Wenn das Element also per Default sichtbar ist, sollte man zunächst abfragen, ob display den Wert none hat (hat es nicht, weil beim ersten Aufruf gar kein Wert ermittelbar), also setzt man block im if- und none im
else-Zweig.Wenn es andersherum ist, Element im Ladezustand per Stylesheet-Regel ausgeblendet - dann macht man es andersherum: Auf block abfragen, im if none setzen, im else block.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
erst mal danke ChrisB für die schnelle antwort.
Ich bin mir jetzt nicht sicher, ob ich es jetzt richt verstanden habe,
denn bei mir ist da noch ein fehler.function referenzen() {
if (document.getElementById('referenzen').style.display != 'none';) {
document.getElementById('referenzen').style.display = 'block';
}
else {
document.getElementById('referenzen').style.display = 'none';
}mfg Tim
-
Hi,
if (document.getElementById('referenzen').style.display != 'none';) {
document.getElementById('referenzen').style.display = 'block';Wenn nicht none, dann block setzen ist falsch herum gedacht.
Wenn none, dann block, sonst none.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
ich habe die Vermutung das >document.getElementById('weiterlesen').style.display = 'none';< nicht get.
ich habe es mal einfach ausprobiert:<html>
<head>
<script type="text/javascript">
function weiterlesen() {
document.getElementById('weiterlesen').style.display = 'none';
{
</script>
</head>
<body>
<span onclick="weiterlesen()">weiterlesen</span>
<div id="weiterlesen">sage nichts!</div>
</body>
</html>das get nicht, aber
<html>
<head>
<style type="text/css">
#weiterlesen {
display: none;
}
</style>
<script type="text/javascript">
function weiterlesen() {
document.getElementById('weiterlesen').style.display = 'block';
}
</script>
</head>
<body>
<span onclick="weiterlesen()">weiterlesen</span>
<div id="weiterlesen">sage nichts!</div>
</body>
</html>das geht!
mfg Tim-
Hi,
ich habe die Vermutung das >document.getElementById('weiterlesen').style.display = 'none';< nicht get.
ich habe es mal einfach ausprobiert:function weiterlesen() {
document.getElementById('weiterlesen').style.display = 'none';
{Wenn du schon hier Syntaxfehler einbaust, dann kann da nicht viel gehen.
das get nicht, aber
<div id="weiterlesen">sage nichts!</div>
Damit, eine Funktion im globalen Gültigkeitsbereich genau so zu benennen wie die ID eines Elements, kann es im IE übrigens auch problematisch werden.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
Hi,
ich habe jetzt doch keine if then else funltion gewählt.
mein problem habe ich jetzt so gelöst:
<html>
<head>
<style type="text/css">
#blau {
display: none;
}
</style>
<script type="text/javascript">
function ein() {
document.getElementById('blau').style.display = 'block';
}
function aus() {
document.getElementById('blau').style.display = 'none';
}
</script>
</head>
<body>
<span onclick="ein()"><div id="rot" style="background-color:#0000ff; width:100px; height:100px; position:absolute; top:200px; left:200px; z-index:1;"></div></span><span onclick="aus()"><div id="blau" style="background-color:#ff0000; width:100px; height:100px; position:absolute; top:200px; left:200px; z-index:2;"></div></span>
</body>
</html>aber danke ChrisB für deine hilfe.
mfg TimK
-
-
-
-
-