Listenelement klickbar machen und link.href auslesen

[rookie]

Hallo!

Das HTML gestaltet sich wie folgt:

  
...  
<li class="hover">  
	<div>  
		<h3><a href="index.html" class="goto">Etwas Text ...</a><h3>  
		<p>Etwas Text ...</p>  
	</div>  
</li>  
...  

Das Dokument besitzt mehrere Listenelemente derselben Klasse. Meine Aufgabe ist es, die Listenelemente klickbar zu machen und die href des jeweils innenliegenden Links auszulesen.

Das Listenelement klickbar zu machen, habe ich wie folgt gelöst:

  
	var li_elements = document.getElementById("main").getElementsByTagName("li");  
	for(var i = 0; i < li_elements.length; i++) {  
		var li_element = li_elements[i];  
		if(li_element.className == "hover") {  
			li_element.onclick = goto;  
		}  
	}  
	function goto(e) {  
		if (!e) e = window.e;  
		var target = e.target || e.srcElement;  
		//alert(target.className);  
		  
	}  
  

Hat jemand eine Idee, wie ich die href des jeweiligen Links an die Funktion übergeben kann?

Vielen Dank im Voraus!

Rookie

[ChrisB]

Hi,

Hat jemand eine Idee, wie ich die href des jeweiligen Links an die Funktion übergeben kann?

getElementsByTagName auf dem LI-Element führt dich im Nu zum a.

MfG ChrisB

[rookie]

Hi,

Hat jemand eine Idee, wie ich die href des jeweiligen Links an die Funktion übergeben kann?

getElementsByTagName auf dem LI-Element führt dich im Nu zum a.

MfG ChrisB

Etwa so?

  
var li_elements = document.getElementById("main").getElementsByTagName("li");  
for(var i = 0; i < li_elements.length; i++) {  
	var li_element = li_elements[i];  
	if(li_element.className == "hover") {  
		li_element.onclick = goto;  
	}  
}  
function goto(e) {  
        var link = this.getElementsByTagName("a");  
        adress = link[0].href;  
        window.location.href = adress;  
}  

Gruß
rookie

[rookie]

Das war etwas schlampig. Hier noch einmal ...

  
var li_elements = document.getElementById("main").getElementsByTagName("li");  
for(var i = 0; i < li_elements.length; i++) {  
	var li_element = li_elements[i];  
	if(li_element.className == "hover") {  
		li_element.onclick = goto;  
	}  
}  
function goto() {  
        var link = this.getElementsByTagName("a");  
        var adress = link[0].href;  
        window.location.href = adress;  
}  

[molily]

Hallo,

function goto(e) {
if (!e) e = window.e;
var target = e.target || e.srcElement;
//alert(target.className);

Wenn das a-Element angeklickt wurde, dann enthält die Variable target das entsprechende DOM-Objekt.

Du kannst im Event-Handler mit der http://de.selfhtml.org/javascript/objekte/node.htm#node_name@title=nodeName-Eigenschaft prüfen, ob das a-Element angeklickt wurde, und nicht andere Elemente im li.

Wenn es sich also um ein a-Element handelt, so kannst du dort die http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#a@title=href-Eigenschaft auslesen und irgendetwas damit tun.

Mathias

[rookie]

Hallo,

function goto(e) {  
  if (!e) e = window.e;  
  var target = e.target || e.srcElement;  
  //alert(target.className);  

Wenn das a-Element angeklickt wurde, dann enthält die Variable target das entsprechende DOM-Objekt.

Die Zeilen in der Funktion habe ich versehentlich stehengelassen, sie dienen zur Kontrolle, welches Element geklickt wurde. Das war wohl etwas irreführend.

Das Problem ist, dass ich nicht weiß in welchen Bereich des Listenelementes der Anwender klickt. Aus diesem Grund muss ich vom Listenelement ausgehen und von dort aus den Link ermitteln um die href zu bekommen.

Gruß rookie

[Gunnar Bittersmann]

@@rookie:

nuqneH

Das Dokument besitzt mehrere Listenelemente derselben Klasse. Meine Aufgabe ist es, die Listenelemente klickbar zu machen und die href des jeweils innenliegenden Links auszulesen.

Anstatt da mit JavaScript rumzufrickeln, ist es eine Option, das Markup (Template?) zu ändern:

<li class="hover">  
	<a href="index.html" class="goto">  
		<h3>Etwas Text ...<h3>  
		<p>Etwas Text ...</p>  
	</a>  
</li>

Und schon ist alles anclickbar.

Qapla'

PS: Die Klassenbezeichner hab ich mal so belassen. Ich glaube nicht, dass "hover" ein sinnvoller Bezeichner ist, und wozu "goto" gut sein soll, erschließt sich mir auch nicht.

[rookie]

Anstatt da mit JavaScript rumzufrickeln, ist es eine Option, das Markup (Template?) zu ändern:

<li class="hover">

<a href="index.html" class="goto">
<h3>Etwas Text ...<h3>
<p>Etwas Text ...</p>
</a>
</li>

  
Ein Blockelement in ein Inlineelement zu packen, ist mir wohl etwas zu herb.  

[Gunnar Bittersmann]

@@rookie:

nuqneH

Ein Blockelement in ein Inlineelement zu packen, ist mir wohl etwas zu herb.

Das a-Element ist in HTML5 kein Inline-Element mehr.

Auch alte Browser kommen schon immer mit Blockelementen in a klar. (Sonst hätte man das ja wegen Abwärtskompatibilität nicht so spezifizieren können.)

Es gibt also keinen Grund gegen Blockelemente in Links. HTML5 verwenden und gut ist.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Auch alte Browser kommen schon immer mit Blockelementen in a klar. (Sonst hätte man das ja wegen Abwärtskompatibilität nicht so spezifizieren können.)

und iirc alte IE besser als alte FX. Ich musste[1] vor langer Zeit in einer Intranetlösung auf

<a><td>...</td></a>

zurückgreifen. Das hat im IE6/7 funktioniert aber nicht im FF1..3 oder was da gerade so aktuell war.

[1]Rückblickend wäre das vielleicht auch anders möglich gewesen.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Ich musste[1] vor langer Zeit in einer Intranetlösung auf
<a><td>...</td></a>
zurückgreifen. Das hat im IE6/7 funktioniert aber nicht im FF1..3 oder was da gerade so aktuell war.

Könnte daran liegen, dass a kein Kind von tr sein darf. http://www.w3.org/TR/html5/tabular-data.html#the-tr-element

a als Kind von td sollte funktioniert haben.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Könnte daran liegen, dass a kein Kind von tr sein darf. http://www.w3.org/TR/html5/tabular-data.html#the-tr-element

mit Sicherheit lags daran, aber die Datentabelle wurde damals nur für den IE gemacht. Es sollten die einzelnen td klickbar sein, es gab nur das Browser-Stylesheet. Wie gesagt: Jugendsünde.

Matthias

[Der Martin]

Hallo,

Ein Blockelement in ein Inlineelement zu packen, ist mir wohl etwas zu herb.

dafür missfällt mir in deinem ursprünglich gezeigten Code das div-Containerelement, das von der Struktur her mit dem li-Element zusammenfällt und daher (so behaupte ich mal) überflüssig ist. Es gruppiert dieselben Inhalte wie sein Elternelement li, und Formatierungen könnten auf li ebenso angewendet werden wie auf das div-Element.

Es sei denn, dein Codebeispiel war nur ein reduziertes Beispiel und das li-Element enthält in Wirklichkeit noch weitere Kindelemente außer dem div.

Ciao,
 Martin

[rookie]

Hallo!

Es sei denn, dein Codebeispiel war nur ein reduziertes Beispiel und das li-Element enthält in Wirklichkeit noch weitere Kindelemente außer dem div.

So ist es. Das Beispiel ist reduziert.

Gruß
Rookie