zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden div ein-/ausblenden für Profis

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.07.2006, 12:13
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.03.2005
Beiträge: 91
Simon_B befindet sich auf einem aufstrebenden Ast
Frage 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>
Aktivieren kann man das ganze dann mit
Code:
<a href="#" onclick="return toggleMe('editor-item-2'); return false" class="no-link">TEXT</a>
Nun mein Problem: Mit dieser Variante kann ich jeden Div separat ansprechen. Ich möchte nun aber verhindern, dass mehrere <div> gleichzeitig angezeigt werden. Also muss ich beim sichtbar-machen eines <div> alle anderen schliessen, welche diese id haben: editor-item-n (wobei n eine ganze Zahl von 1 bis ... ist).

Kann mir da jemand helfen? ich kann leider fast kein JS

Danke und Gruss, Simon
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.07.2006, 14:58
Benutzerbild von telekommander
Serviceschlampe
neuer user
 
Registriert seit: 25.07.2006
Beiträge: 21
telekommander befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
ich kann leider fast kein JS
... macht nüschts.

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"; }
}
Und Html:
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>
Achte auch darauf das nach CSS-Regeln immer nur eine ID vergeben werden darf !
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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.07.2006, 18:06
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.03.2005
Beiträge: 91
Simon_B befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #4 (permalink)  
Alt 30.07.2006, 18:34
Benutzerbild von telekommander
Serviceschlampe
neuer user
 
Registriert seit: 25.07.2006
Beiträge: 21
telekommander befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Simon_B
( ... ) in einem CMS verwenden möchte, vornherein nicht, wie viele dieser <div> die Seiten haben wird.
Ok, das macht dann natürlich nicht viel Sinn.

Zitat:
Zitat von Simon_B
( ... ) 100 Einträge "auf Vorrat" machen - aber ich hab das Gefühl, dass man das auch dynamisch hinkriegt, oder?


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';}
}
Html:
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
Mit Zitat antworten
  #5 (permalink)  
Alt 31.07.2006, 00:22
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.03.2005
Beiträge: 91
Simon_B befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #6 (permalink)  
Alt 31.07.2006, 14:51
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 27.06.2006
Beiträge: 134
cybaer befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Simon_B
Nun mein Problem: Mit dieser Variante kann ich jeden Div separat ansprechen. Ich möchte nun aber verhindern, dass mehrere <div> gleichzeitig angezeigt werden. Also muss ich beim sichtbar-machen eines <div> alle anderen schliessen,
http://Coding.binon.net/Toggle

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>
Es sollen alle DIVs mit der ID "test*" eingeklappt werden, bis auf "test02":

Code:
toggle("fold","div:id","test","02");
Und man kann auch bestimmen, daß die Ausnahme "02" nicht nur nicht eingeklappt wird, sondern explizit ausgeklappt wird (falls sie vorher versteckt war):

Code:
toggle("fold","div:id","test","02",true);
__________________
Gruß, Cybaer
Mit Zitat antworten
  #7 (permalink)  
Alt 01.11.2016, 17:03
Neuer Benutzer
neuer user
 
Registriert seit: 01.11.2016
Beiträge: 1
KaRza befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:41 Uhr.