[GastForen Programmierung/Entwicklung JavaScript div zeigen - und verbergen (leichte frage, vermutlich)

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

div zeigen - und verbergen (leichte frage, vermutlich)

rispengras1
Beiträge gesamt: 60

9. Feb 2007, 15:22
Beitrag # 1 von 7
Bewertung:
(2550 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Liebe HDS.ch Gemeinde!

auf

www.diehoelleistausgebucht/test

seht ihr ein file, das mein problem zeigt: wenn man auf einen der punkte rechts klickt, soll das entsprechende div rechts gezeigt werden (was ja auch funktioniert) aber eben etwaige andere sichtbaren div-kästen gleichzeitig verborgen werden, sodass es zu keinem umbruch kommt und immer nur 1 kasten rechts sichtbar ist. .
ich bin leider nur ein dragunddrop-javascriptanwender, aber ich habe nicht das richtige gefunden - kennt wer ein script? was muss ich oben im header ergänzen? lieber gruss, und vielen dank, toni
X

div zeigen - und verbergen (leichte frage, vermutlich)

minou
Beiträge gesamt: 135

9. Feb 2007, 16:06
Beitrag # 2 von 7
Beitrag ID: #275534
Bewertung:
(2519 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo,

also bei mir geht der Link nicht (Seite nicht gefunden), hast du nicht das .ch, de oder ähnliches vergessen?

Grüsse

minou


als Antwort auf: [#275518]

div zeigen - und verbergen (leichte frage, vermutlich)

rispengras1
Beiträge gesamt: 60

9. Feb 2007, 16:11
Beitrag # 3 von 7
Beitrag ID: #275536
Bewertung:
(2514 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
sorry! (gut dass das wochenende naht ...!)

www.diehoelleistausgebucht.com/test

lg t.


als Antwort auf: [#275534]

div zeigen - und verbergen (leichte frage, vermutlich)

ganesh
Beiträge gesamt: 1981

9. Feb 2007, 18:32
Beitrag # 4 von 7
Beitrag ID: #275563
Bewertung:
(2501 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Code
 

<script language="JavaScript">
function togg(showme, hide1, hide2){
if (document.getElementById) {
document.getElementById(showme).style.display = (document.getElementById(showme).style.display=='block'?'none':'block');
document.getElementById(hide1).style.display = 'none';
document.getElementById(hide2).style.display = 'none';
}
}
</script>


</head>

<body>


<div id="navi">

<img src="http://www.diehoelleistausgebucht.com/test/images/aufzaehlung.gif" alt="" width="8" height="7" />
<a href="#" onClick="javascript:togg('r1','r2','r3'); return false" title="Versteckten Absatz anzeigen/verstecken"> punkt 1</a>
<a href="#" onClick="javascript:togg('r2','r1','r3'); return false" title="Versteckten Absatz anzeigen/verstecken"> punkt 2</a>
<a href="#" onClick="javascript:togg('r3','r1','r2'); return false" title="Versteckten Absatz anzeigen/verstecken"> punkt 3</a>
</div>

<div id="r1">
R1 - das steht rechts
</div>

<div id="r2">
R2 - das steht rechts
</div>

<div id="r3">
R3 - das steht rechts
</div>



Wenn du allerdings noch mehr Elemente hast, würde ich empfehlen, die DIVs in einem Array zu definieren. Den fragst du dann jedesmal ab und stellst alle DIVs auf display=none, ausser dem gerade zu aktivierenden DIV.

Eine andere Variante wäre, statt mit display block|none einfach immer den z-index des aktivierten DIV +1 zu erhöhen (falls absolut positioniert + Elemente gleich gross).


als Antwort auf: [#275518]

div zeigen - und verbergen (leichte frage, vermutlich)

rispengras1
Beiträge gesamt: 60

9. Feb 2007, 19:59
Beitrag # 5 von 7
Beitrag ID: #275576
Bewertung:
(2489 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Ganesh,

danke für die schnelle Hilfe. Funktioniert ganz gut, aber ein Problem gibt es noch: Beim ersten Laden der Seite sind alle drei "r" sichtbar. Sollten aber alle unsichtbar sein. Kannst du mir das noch zeigen?

lg t.


als Antwort auf: [#275563]

div zeigen - und verbergen (leichte frage, vermutlich)

ganesh
Beiträge gesamt: 1981

10. Feb 2007, 05:12
Beitrag # 6 von 7
Beitrag ID: #275602
Bewertung:
(2477 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Das kann ich nicht nachvollziehen. Mit welchem Browser?

Hier mein vollständiger Quellcode (etwas vereinfacht / gestrafft):

Code
<html> 
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<title>show/hide funktion</title>

<style type="text/css">
* {margin:0; padding:0;}
img {border: 0;}
#navi {background-color: #ddd;margin: 10px;padding: 10px;float: left;height: 400px;width: 400px;}
#r1 {background-color: #776999;margin: 10px;padding: 10px;float: left;height: 400px;width: 400px; display: none;}
#r2 {background-color: #ff2199;margin: 10px;padding: 10px;float: left;height: 400px;width: 400px; display: none;}
#r3 {background-color: #2277ff;margin: 10px;padding: 10px;float: left;height: 400px;width: 400px; display: none;}
</style>

<script language="JavaScript">
function togg(showme, hide1, hide2){
if (document.getElementById) {
document.getElementById(showme).style.display = (document.getElementById(showme).style.display=='block'?'none':'block');
document.getElementById(hide1).style.display = 'none';
document.getElementById(hide2).style.display = 'none';
}
}
</script>


</head>

<body>

<div id="navi">
<a href="#" onClick="javascript:togg('r1','r2','r3'); return false" title="Versteckten Absatz anzeigen/verstecken"> punkt 1</a>
<a href="#" onClick="javascript:togg('r2','r1','r3'); return false" title="Versteckten Absatz anzeigen/verstecken"> punkt 2</a>
<a href="#" onClick="javascript:togg('r3','r1','r2'); return false" title="Versteckten Absatz anzeigen/verstecken"> punkt 3</a>
</div>


<div id="r1">R1 - das steht rechts</div>
<div id="r2">R2 - das steht rechts</div>
<div id="r3">R3 - das steht rechts</div>

</body>
</html>



als Antwort auf: [#275576]

div zeigen - und verbergen (leichte frage, vermutlich)

rispengras1
Beiträge gesamt: 60

10. Feb 2007, 12:54
Beitrag # 7 von 7
Beitrag ID: #275626
Bewertung:
(2464 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
hast recht. passt perfekt. lg anton


als Antwort auf: [#275602]
X