|
|||
div ein-/ausblenden für Profis
Hallo
Ich habe mehrere <div> welche ich per JS ein und ausblenden kann. Hier der Code: Code:
<script type="text/javascript" language="JavaScript"> <!-- function toggleMe(item){ var e=document.getElementById(item); if(!e)return true; if(e.style.display=="none"){ e.style.display="block" } else { e.style.display="none" } return true; } //--> </script> Code:
<a href="#" onclick="return toggleMe('editor-item-2'); return false" class="no-link">TEXT</a> Kann mir da jemand helfen? ich kann leider fast kein JS Danke und Gruss, Simon |
Sponsored Links |
|
||||
Zitat:
Probiers mal so, ist denke ich einfacher. Javascript-technisch, like this: Code:
function toggleswitch(div) { var option=['div01','div02','div03','div04']; // nach belieben fortsetzen ... for(var i=0; i<option.length; i++) { obj=document.getElementById(option[i]); obj.style.display=(option[i]==div) && !(obj.style.display=="block")? "block" : "none"; } } Code:
<a href="#" onclick="toggleswitch('div01')" >Div 1</a> <div id="div01" style="display:none" class="box"> Content Textlink 1 </div> <br /> <a href="#" onclick="toggleswitch('div02')" >Div 2</a> <div id="div02" style="display:none" class="box"> Content Textlink 2 </div> Auch würde ich das Script auslagern in eine externe Datei (z.B. toggle.js ) Gruss, T.
__________________
"Das meiste, das man im WWW findet, ist Grundrauschen." (C. Schoenleber in de.org.ccc) Daily Garfield |
Sponsored Links |
|
|||
Vielen Dank für den Tipp!
Da ich das ganze in einem CMS verwenden möchte, weiss ich im vornherein nicht, wie viele dieser <div> die Seiten haben wird. Deshalb kann ich diese nicht fest unter var option=[..] eintragen. Ich könnte einfach mal gegen 100 Einträge "auf Vorrat" machen - aber ich hab das Gefühl, dass man das auch dynamisch hinkriegt, oder? |
|
||||
Zitat:
Zitat:
Geht, und deshalb mal eine umgestrickte Variante, aber irgendeinem ID-Schema müssen die Container folgen. Hier z.B. id="div+Ziffer" . Um nicht alle Container als Variable festzulegen schlage ich diese Version vor: Code:
function toggleswitch(id) { var d = document.getElementById(id); for (var i = 1; i<=10; i++) { if (document.getElementById('div'+i)) {document.getElementById('div'+i).style.display='none';} } if (d) {d.style.display='block';} } Code:
<a href="#" onclick="toggleswitch('div1');">TEXT</a> <br /> <div id="div1" style="display:none" class="box"> Contentcontainer1 </div> <a href="#" onclick="toggleswitch('div2');">TEXT</a> <br /> <div id="div2" style="display:none" class="box"> Contentcontainer2 </div>
__________________
"Das meiste, das man im WWW findet, ist Grundrauschen." (C. Schoenleber in de.org.ccc) Daily Garfield |
|
|||
Hey, super! Vielen Dank.
Perfekt wäre das Script, wenn man ein aktivierter <div> auch wieder deaktivieren könnte. So wie es jetzt ist, ist sobald ein <div> aktiv ist, bleibt immer einer aktiv. Gruss, Simon Geändert von Simon_B (31.07.2006 um 00:35 Uhr) |
|
|||
Zitat:
Bei der Funktion kannst Du einen "Head" für einen Attributswert (z.B. ID) angeben, der die Elemente definiert, die "bearbeitet" werden sollen, sowie einen "Tail", der als "Ausnahme" behandelt wird (es sind beliebig viele "Ausnahmen" definierbar). Beispiel: Code:
<div id="test01"></div> <div id="test02"></div> <div id="test03"></div> Code:
toggle("fold","div:id","test","02"); Code:
toggle("fold","div:id","test","02",true);
__________________
Gruß, Cybaer |
|
|||
Guten Tag,
ich weiß das Thema ist schon "etwas" älter aber dennoch eine Frage. könnte man z.b. div2 einblenden lassen wenn man in der Browser Adresszeile #div2 eingeben würde? gruß edit: sehr nice, das Zauberwort heißt :taget siehe: Code:
<style> .div01{ display:none } .div01:target { display: block; } .div02{ display:none } .div02:target { display: block; } </style> <script type="text/javascript" language="JavaScript"> function toggleswitch(div) { var option=['div01','div02','div03','div04']; // nach belieben fortsetzen ... for(var i=0; i<option.length; i++) { obj=document.getElementById(option[i]); obj.style.display=(option[i]==div) && !(obj.style.display=="block")? "block" : "none"; } } </script> <a href="#div01" onclick="toggleswitch('div01')" >Div 1</a> <a href="#div02" onclick="toggleswitch('div02')" >Div 2</a> <div id="div01" class="div01"> Content Textlink 1 </div> <br /> <div id="div02" class="div02"> Content Textlink 2 </div> Geändert von KaRza (01.11.2016 um 17:15 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 20:29 |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 16:41 |
Schriftfarbe in den Eintragungsfeldern von jforms | Steveislucky | CSS | 2 | 16.03.2010 11:59 |
CSS Text nebeinander? | carstiee09 | CSS | 13 | 13.11.2009 20:18 |