toggle-Befehl: Modifikation

orffyre

orffyre

Erfahrenes Mitglied
Hallo!

Ich habe auf meiner Webpage einen toggle-Befehl wie folgt:

im head der html-Datei:
HTML: 
<script language="JavaScript" type="text/JavaScript">
        <!--
        function toggle(strId)
        {
                obj = document.getElementById(strId);
                obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
        }
        //-->
</script>

Jetzt habe ich das immer so gemacht:

HTML: 
<a href="javascript:toggle('test1');void(0);">Link 1</a>
<div style="display:none;" id="test1">
    ...Inhalt...
</div>

Mein Problem bei der Sache ist, dass ich jeden Link, den ich togglen will, eine id zuweisen muss. Bei zwei Links wäre das also id="test2", bei dreien, id="test3" usw...

Jetzt habe ich aber durch den Einbau in ein Java-Programm das Problem, dass ich den Zähler für die id immer hochzählen müsste und das geht natürlich nicht.

Kann ich das so irgendwie abändern, dass ich auf ids verzichten kann?

Danke im Vorraus für jegliche Mühe!

Mit freundlichen Grüssen
orffyre
 
Probier mal Folgendes:
HTML: 
<script type="text/JavaScript"><!--
window.onload = function(){
	var divElements = document.getElementsByTagName("div");
	for(var i=0; i<divElements.length; i++) {
		if( !divElements[i].className.match(/\s*foobar\s*/) ) {
			continue;
		}
		var new_aElement = document.createElement("a");
		new_aElement.className = "pseudo-link";
		new_aElement.onclick = new Function("toggle(this.nextSibling)");
		new_aElement.appendChild(document.createTextNode("wechseln"));
		divElements[i].parentNode.insertBefore(new_aElement, divElements[i]);
	}
}
function toggle( obj )
{
	obj.style.display = (obj.style.display == "block") ? "none" : "block";
}
//-->
</script>
<style type="text/css">
a.pseudo-link {
	cursor: pointer;
}
a.pseudo-link:hover {
	background-color: #fe0;
}
</style>

<div class="foobar">
	Lorem Ipsum
</div>
<div class="foobar">
	Lorem Ipsum
</div>
<div class="foobar">
	Lorem Ipsum
</div>
 
@gumbo:

das problem ist hier mit dem "wechseln".

Vorher hatte ich meinen Link, den ich anklicken konnte und darunter dann ein Inhalt erschien, in dem <div>...</div>.

Jetzt kann ich aber keinen Einfluss mehr nehmen, was dort stehen soll. Dort steht ja immer "wechseln". Bei mit steht aber immer was anderes und zwar:

"Depth 0", dann will ich das anklicken und es erscheint, was im div steht.
"Depth 1", ebenso. usw....

Danke trotzdem, Mr. Gumbo!
 
Vorschlag:
Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
document.write(unescape('%3Cstyle%20type%3D%22text%2Fcss%22%3E%0D%0A%3C%21--%0D%0A.toggler%20div%7Bdisplay%3Anone%7D%0D%0A--%3E%0D%0A%3C%2Fstyle%3E'));
function toggle(obj)
{
  obj=obj.parentNode.lastChild;
  obj.style.display=(obj.style.display!='block')
                      ? 'block'
                      : 'none';
}
window.onload=function()
{
  divs=document.getElementsByTagName('div');
  for(i=0;i<divs.length;++i)
    {
      if(!divs[i].className.match(/^toggler/))continue;
      divs[i].firstChild.onmousedown=new Function('toggle(this);');
      divs[i].firstChild.style.cursor='pointer';
    }
}
//-->
</script>
</head>
<body>

<div class="toggler"><a>Link 1</a>
<div>
...Inhalt1...
</div></div>

<div class="toggler"><a>Link 2</a>
<div>
...Inhalt2...
</div></div>

<div class="toggler"><a>Link 3</a>
<div>
...Inhalt3...
</div></div>



</body>
</html>

wie du siehst, sind <a> und <div> nochmal in nem weiteren <div> mit Klassennamen "toggler"...wichtig dabei ist, dass der Klassenname bestehen bleibt, und zwischen
"toggler" und dem <a> kein Leerzeichen ist...ebenso wie zwischen den beiden schliessenden Div-Tags.
 
Sven Mintel hat gesagt.:
wichtig dabei ist, dass […] zwischen "toggler" und dem <a> kein Leerzeichen ist...ebenso wie zwischen den beiden schliessenden Div-Tags.
Zum Vergrößern anklicken....
Man kann das ganze aber auch so stricken, dass das irrelevant ist:
Code: 
function toggle(obj)
{
  obj.style.display=(obj.style.display!="block")
                      ? "block"
                      : "none";
}
window.onload=function()
{
  divs=document.getElementsByTagName("div");
  for(i=0;i<divs.length;++i)
    {
      if(!divs[i].className.match(/^toggler/))continue;
      divs[i].getElementsByTagName("a")[0].onmousedown=new Function("toggle(this.parentNode.getElementsByTagName('div')[0]);");
      divs[i].firstChild.style.cursor="pointer";
    }
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück