div zeigen - und verbergen (leichte frage, vermutlich) - JavaScript - HilfDirSelbst.ch

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

Programmierung/Entwicklung

Themen

Beiträge

Moderatoren

Letzter Beitrag

JavaScript

1407

5346

Thomas Richard

6. Jun 2023, 09:44

meinereiner69

div zeigen - und verbergen (leichte frage, vermutlich)

rispengras1

Beiträge gesamt: 60

9. Feb 2007, 15:22
Beitrag # 1 von 7
Bewertung:
(2568 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

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:
(2537 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:
(2532 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:
(2519 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:
(2507 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:
(2495 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:
(2482 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

hast recht. passt perfekt. lg anton

als Antwort auf: [#275602]

Aktuell

PDF / Print

INKredible Preflight Checks

| 27.06.2023

Weitere Events

Neuste Foreneinträge

Adobe Acrobat DC Pro 23.006.20320 (Mac) / Sonderbares

Leistungseinschrï¿½nkung?

Markierten Text in eine neue Tabellenzelle verschieben (INDD18.5 WIN10)

Indesign-Umstellung fï¿½r arabisch

Fotos: Ordner mit mehreren Alben verï¿½ffentlichen

Lightroom: Katalog mit mehreren Alben verï¿½ffentlichen

In PDF Formular das eingetragene Datum um 6 oder 12 Monate spï¿½ter berechnen

Indesign 2022 Versionen der Abteilung sukzessive nicht mehr startbar.

Suche Script fï¿½r Musterfarbe anwenden

mount SMB-Share (Azure/Linux Ubuntu) von Windows 11

Weitere Stellenangebote