✔ Zurücksetzen von Visible

[Malaxo]

Hab nicht viel ahnung von JS aber "kann" source lesen.

Ein Script gefunden

<script type="text/javascript">
<!--
function ShowHide(id) {
    obj = document.getElementsByTagName("div");
    if (obj[id].style.visibility == 'visible'){
    obj[id].style.visibility = 'hidden';
    }
    else {
    obj[id].style.visibility = 'visible';
    }
}
//-->
</script>

&

<a href="javascript:ShowHide('Blub')">1. Link</a>

Jetzt ist das so, ich hab mehrere Div's die aufeinander liegen. Am anfang alle visible:hidden, wenn man auf den 1. Link klickt sollte das div "Blub" sichtbar werden und erst wieder verschwienden wen man auf den 2. Link klickt, da aber sollte der 2. Link sichtbar werden dafür der 1. halt eben weg.

Wie kann ich das Scrip umschreiben das dies möglich ist?

 

[Gumbo]

Probier mal Folgendes:

function ShowHide( objId, clssName )
{
	var divElements = document.getElementsByTagName("div");
	for(var i=0; i<divElements.length; i++) {
		if( !divElements[i].className.match(new RegExp("\s*"+clssName+"\s*")) ) {
			continue;
		}
		divElements[i].style.visibility = "hidden";
	}
	document.getElementById(objId).style.visibility = "visible";
}

onclick="ShowHide('Blub', 'foobar')"

Nun weist du den div-Elementen nur noch die Klasse „foobar“ zuweisen.

 

[Malaxo]

Ok die Funktion hab ich übernommen.

Das ist nun ein Div von mehreren:

<div id="blub" class="foobar" style="visibility:hidden"
...
</div>

Hier mein Link (ich glaube da ist bzw mach ICH was falsch, hab verschiedene möglichkeiten probiert (mit Javascript ohne etc. etc. gegooglet aber hat auch nichts gebracht)

<a href="javascript:onclick="ShowHide('blub', 'foobar')"">Blub</a></li>

Stimmt das? bei mir jedenfals klappt es leider nicht.
---------------------------------
Im IE krieg ich 2 fehler der eine auf der ersten Zeile (Doctype) der andere sagt das in der Funktion ein ")" fehlt. Das dort beim if sind 3 klammern auf nur 2 zu evt. das?

 

[Gumbo]

Ein einfaches span-Element reicht:

<span onclick="ShowHide('blub', 'foobar')">Blub</span>

Zudem habe ich noch Kleinigkeiten der Funktion korrigier.

 

[Malaxo]

Was für Kleinigkeiten hast du korrigiert?

jetzt ist es kein Link mehr oder? Kann nicht draufklicken:

<li><span onclick="ShowHide('blub', 'foobar')">blub</span></li>

 

[Gumbo]

Bei mir funktioniert es wunderbar:

<script type="text/javascript"><!--
function ShowHide( objId, clssName )
{
	var divElements = document.getElementsByTagName("div");
	for(var i=0; i<divElements.length; i++) {
		if( !divElements[i].className.match(new RegExp("\s*"+clssName+"\s*")) ) {
			continue;
		}
		divElements[i].style.visibility = "hidden";
	}
	document.getElementById(objId).style.visibility = "visible";
}
//-->
</script>

<span onclick="ShowHide('foo', 'foobar')">foo</span>
<div id="foo" class="foobar" style="visibility:hidden">
...
</div>
<span onclick="ShowHide('bar', 'foobar')">bar</span>
<div id="bar" class="foobar" style="visibility:hidden">
...
</div>

 

[Malaxo]

Ich kann nicht draufklicken. Es ist ein normaler TEXT mehr nicht, wenn ich draufklicke wird er einfach Markiert.

 

[Gumbo]

Aber es funktioniert, oder?

 

[Maik]

Bei mir wird eine Javascript-Fehlermeldung ausgegeben: "Regex is not defined".

 

[Gumbo]

Mein Fehler. Ich hatte die korrigierte Funktion in dem Beispiel nicht übernommen.