Li Menu markieren

[droom]

function tuwas(ele) {
   document.getElementById(ele.parentNode.id).style.backgroundColor  = "silver";
}

<li id="limenu1"><a id="a1" href="#" onclick="tuwas(this);return false">Klick mich</a></li>

<li id="limenu2"><a id="a2" href="#" onclick="tuwas(this);return false">Klick mich</a></li>

Wenn man auf dem ersten Link klickt, wird er grau markiert. Wenn man nun auf den 2. klickt wird er ebenso grau markiert.
Ich möchte gern, dass beim Klick auf limenu2 zb limenu nicht mehr markiert ist. Wie kann ich sowas erreichen?

[Gunnar Bittersmann]

Hello out there!

document.getElementById(ele.parentNode.id).style.backgroundColor  = "silver";

Autsch! Du hast doch mit ele.parentNode schon die Referenz auf das Eltenelement. Es ist unsinnig, dessen ID auszulesen, um ebendieses Element im ganzen Baum wieder zu suchen.

ele.parentNode.style.backgroundColor = "silver";

Ich möchte gern, dass beim Klick auf limenu2 zb limenu nicht mehr markiert ist. Wie kann ich sowas erreichen?

Entweder du merkst dir das vorher markierte Listenitem, um dessen Hintergrundfarbe bei Click auf ein anderes zurückzusetzen; oder du setzt in einer Schleife alle Listitems zurück und färbst dann das gewählte.

See ya up the road,
Gunnar

[droom]

Entweder du merkst dir das vorher markierte Listenitem, um dessen Hintergrundfarbe bei Click auf ein anderes zurückzusetzen; oder du setzt in einer Schleife alle Listitems zurück und färbst dann das gewählte.

------

Wie geht das denn? Sorry bin noch newbie. hab so versucht:

for (var i = 0; i < document.getElementsByTagName("li").length; i++)  {
  if (ele)
  ele.parentNode.style.backgroundColor = "silver";
  else
  xxxx
  }

weiss gar nicht, wie ich das machen soll

[droom]

Es funktionniert. Ich habe nun:

function tuwas(ele) {
    ele.parentNode.style.backgroundColor = "silver";
    var i= ele.parentNode.id.substring(6, 7);
  for (var j=1; j<6; j++){
  if(j != i)
  document.getElementById("limenu"+j).style.backgroundColor = "";
  }
}

Danke für die Hilfe. ;-)

[Cheatah]

Hi,

Es funktionniert. Ich habe nun:

fein. Tu mir bitte noch einen Gefallen:

var i= ele.parentNode.id.substring(6, 7);

Sorge bitte dafür, dass das Script auch ohne IDs arbeiten kann. _Ganz_ ohne IDs. Denn bei dieser Code-Zeile kriege ich Kopfschmerzen, weil sich meine Zehennägel dermaßen schwungvoll aufrollen, dass sie wie ein schlecht eingestelltes Rollo ständig an meinen Schädel datschen ... :-)

Cheatah

[Gunnar Bittersmann]

Hello out there!

Danke für die Hilfe. ;-)

Und warum nimmst du die Hilfe nicht an?

Die IDs und insbesondere 'getElementById()' sind überflüssig.

function tuwas(ele)  
{  
  var list = ele.parentNode.parentNode;  
  for (var i = 0; i < list.length; i++)  
  {  
    var listChild = list.[link:http://de.selfhtml.org/javascript/objekte/node.htm#child_nodes@title=childNodes][i];  
    if (listChild.[link:http://de.selfhtml.org/javascript/objekte/node.htm#node_type@title=nodeType] == 1) // die Abfrage ist notwendig, da list evtl. auch Textknoten als Kinder hat, s.a. [link:/archiv/2007/8/t157448/#m1024385]  
      listChild.style.backgroundColor = "";  
  }  
  ele.parentNode.style.backgroundColor = "silver";  
}

See ya up the road,
Gunnar

PS: Du machst hoffentlich nicht deine ganze Navigation mit JavaScript? [DIALOG-ROBOT]

[droom]

Okay dann ohne IDs ;)
Habe versucht deine Funktion anzupassen, damit nur das aktuelle li gefärbt wird.

function tuwas(ele)
{
  var list = ele.parentNode.parentNode;
  for (var i = 0; i < list.length; i++)
  {
    var listChild = list.childNodes[i];
    if (listChild.nodeType == 1 && listChild != ele.parentNode)
      listChild.style.backgroundColor = "";
  }
  ele.parentNode.style.backgroundColor = "blue";
}

aber die Li färben sich nacheinander. :(

[Cheatah]

Hi,

Habe versucht deine Funktion anzupassen, damit nur das aktuelle li gefärbt wird.

ich bin ehrlich begeistert. Der Code ist gut und hat nur einen einzigen kleinen Fehler (soweit ich es gerade sehe):

var list = ele.parentNode.parentNode;

Die Variable list referenziert nun das <ul>-Element ...

for (var i = 0; i < list.length; i++)

... dessen length-Eigenschaft ziemlich uninteressant ist :-)

var listChild = list.childNodes[i];

Weise der Variablen list gleich die childNodes zu.

Cheatah

[Kai345]

Grütze .. äh ... Grüße!

Wie geht das denn? Sorry bin noch newbie. hab so versucht:

for (var i = 0; i < document.getElementsByTagName("li").length; i++)  {
  if (ele)

Das geht nicht. Du übergibst ja der Funktion die Variable "ele" als Argument, daher hat diese Variable immer einen Wert und die if-Bedingung ist erfüllt. Also wird der else-Zweig niemals ausgeführt.

Du mußt also den aktuellen Wert der Schleife mit dem übergebenen Element vergleichen.

var li_liste = document.getElementsByTagName("li");  
for (var i = 0; i < li_liste.length; i++)  {  
  li_liste[i].style.backgroundColor = "zartrosamithellblauentupfen";  
  if (ele.parentNode === li_liste[i]) {  
     li_liste[i].style.backgroundColor = "silver";  
  }  
}

Nächstes Problem: das scheitert genau in dem Moment, wenn du mehrere Listen auf der Seite hast und die anderen Listen nicht beeinflusst werden sollen, weil document.getElementsByTagName("li") natürlich ALLE <li> erfasst.

Aufgrund der Listen-Struktur (hier wg. Übersicht ohne schließende Tags)

<ul>  
  <li>  
    <a>  
  <li>  
    <a>

kannst du das aber auch lösen: die <li> Tags, die du ändern willst, sind alle unterhalb des <ul>-Tags angeordnet. Wie du ja schon weißt, kommst du von deinem angeklickten Link <a> mit parentNode zu dem entsprechenden <li>. Um nun zu <ul> zu gelangen, mußt du das gleich nochmal machen, also ele.parentNode.parentNode

Damit können wir die <li>-Kollektion nun einschränken:

statt document (was ALLE <li> beinhaltet)

var li_liste = document.getElementsByTagName("li");

benutzt du

var li_liste = ele.parentNode.parentNode.getElementsByTagName("li");

(so, und nun hoffe ich nur noch, daß ich mich jetzt nirgendwo vertan habe *g*)

Cü
Kai

[droom]

Es funktionniert prima. ;)

Danke Kai!

[Cheatah]

Hi,

document.getElementById(ele.parentNode.id)

aua. Informatiker führen ein neues Problem immer auf ein bekanntes Problem zurück, koste es was es wolle ...

Es existiert kein Grund, wenn Du ein Element vorliegen hast, dessen ID zu nehmen und dann noch einmal nach dem Element zu suchen. Dieses Vorgehen führt zu drei Möglichkeiten:

1.) Das Element hat keine ID, dann schlägt das Vorhaben fehl.
2.) Mehrere Elemente haben dieselbe ID, was zwar ohnehin extremstst[1] falsch ist, aber ebenso zum Fehlschlag führt.
3.) Du erhältst das Element, das Du schon hattest, bevor Du dessen ID ermitteltest.

Wenn ein Fehlschlag Dir also keinerlei Vorteil bringt, dann spare Dir bitte das komplette getElementById-Geraffel, und im Zweifel nimm auch die IDs aus dem HTML-Code, wenn Du sie nicht aus anderen Gründen eingefügt hast.

Ich möchte gern, dass beim Klick auf limenu2 zb limenu nicht mehr markiert ist. Wie kann ich sowas erreichen?

Indem Du bei allen anderen List-Elementen überprüfst, welchen Zustand sie haben, bzw. den gewünschten Zustand herstellst. Sinnvoll ist es übrigens, keine style-Manipulationen im JavaScript unterzubringen, sondern die Formatierungsangaben im CSS zu lassen, wo sie hingehören, und statt dessen die Elemente sinnvoll zu klasifizieren.

Cheatah

[1] Ja, äußerststst.

[Glory]

function tuwas(ele) {
   document.getElementById(ele.parentNode.id).style.backgroundColor  = "silver";
}

Oder kürzer: ele.parentNode.style.backgroundColor  = "silver";
Ich finde "ele" übrigens etwas komisch, aber das ist Geschmackssache.

<li id="limenu1"><a id="a1" href="#" onclick="tuwas(this);return false">Klick mich</a></li>

<li id="limenu2"><a id="a2" href="#" onclick="tuwas(this);return false">Klick mich</a></li>

Das "return false" kannst du dir sparen. Und das Semikolon auch.

Wenn man auf dem ersten Link klickt, wird er grau markiert. Wenn man nun auf den 2. klickt wird er ebenso grau markiert.
Ich möchte gern, dass beim Klick auf limenu2 zb limenu nicht mehr markiert ist. Wie kann ich sowas erreichen?

Kommt drauf an. Wenn du wirklich nur zwei Listenpunkte hast, dann könntest du in die Funktion tuwas(ele) folgendes einbinden:

  
function tuwas(ele) {  
   if (ele.parentNode.id == "limenu1")  
      document.getElementById("limenu2").parentNode.backgroundColor = "Hier den Farbcode für >nicht markiert< einsetzen";  
   else  
      document.getElementById("limenu1").parentNode.backgroundColor = "Hier den Farbcode für >nicht markiert< einsetzen";  
//...  
}

Sauber ist das ganze zwar nicht wirklich, aber probier es erstmal so. Es wird dabei überprüft, welches <li> angeklickt wurde und dann das entsprechend andere "ent-markiert".
Wenn du allerdings sehr viele <li>s hast oder deren Anzahl gar dynamisch ist, musst du etwas allgemeiner an die Sache herangehen. Das Prinzip bleibt allerdings in etwa das gleiche. Du fragst eben ab, welches <li> angeklickt wurde und ent-markierst alle anderen <li>s außer diesem <li>. Dabei sollten die Arrays und Schleifen helfen.

[Cheatah]

Hi,

Ich finde "ele" übrigens etwas komisch, aber das ist Geschmackssache.

es beflügelt die Fant-asie.

<li id="limenu2"><a id="a2" href="#" onclick="tuwas(this);return false">Klick mich</a></li>
Das "return false" kannst du dir sparen.

Nein, kann er nicht. Es zu entfernen führt zu einem grundlegend anderen Verhalten beim Klick auf das Element.

Und das Semikolon auch.

Eher im Gegenteil: Es fehlt eines. Nicht wegen technischer Notwendigkeit, sondern wegen guten Programmierstils.

Sauber ist das ganze zwar nicht wirklich,

Stimmt ;-) Beispielsweise basiert Dein Code wieder auf den IDs, die nach unserem bisherigen Kenntnisstand völlig unnötig sind.

Cheatah

[Glory]

Hi,

Ich finde "ele" übrigens etwas komisch, aber das ist Geschmackssache.

es beflügelt die Fant-asie.

<li id="limenu2"><a id="a2" href="#" onclick="tuwas(this);return false">Klick mich</a></li>
Das "return false" kannst du dir sparen.

Nein, kann er nicht. Es zu entfernen führt zu einem grundlegend anderen Verhalten beim Klick auf das Element.

Tatsächlich? Was ist denn der Unterschied? (nimm mir bitte die Arbeit des Ausprobierens ab)

Sauber ist das ganze zwar nicht wirklich,

Stimmt ;-) Beispielsweise basiert Dein Code wieder auf den IDs, die nach unserem bisherigen Kenntnisstand völlig unnötig sind.

Das ist schon klar, aber am Niveau der Fragestellung , kann man sich zusammenreimen, dass es noch ein Anfänger ist, der mit soviel "Perfektion" (;)) total überfordert ist und dann nur frustriert ist. Er soll lieber solange bei seinem Stil bleiben, bis er ihn mehr oder weniger beherrscht und dann anfangen an seinen Fehlern zu arbeiten. So mach ich das immer (und ich denke, es funktioniert ganz gut).

[Kai345]

Grütze .. äh ... Grüße!

Das "return false" kannst du dir sparen.

Nein, kann er nicht. Es zu entfernen führt zu einem grundlegend anderen Verhalten beim Klick auf das Element.

Tatsächlich? Was ist denn der Unterschied? (nimm mir bitte die Arbeit des Ausprobierens ab)

Bin zwar nicht die angesprochene Person, aber ...

Normalerweise springt der Browser dann zum Seitenanfang (href="#")

Er soll lieber solange bei seinem Stil bleiben, bis er ihn mehr oder weniger beherrscht und dann anfangen an seinen Fehlern zu arbeiten. So mach ich das immer (und ich denke, es funktioniert ganz gut).

Er soll einen falschen Stil erst so richtig verinnerlichen und sich dann wieder mühevoll abgewöhnen (was i.d.R. fast nie wieder vollständig gelingt)?  Klingt nicht übermäßig sinnvoll.

Cü
Kai

[droom]

Er soll einen falschen Stil erst so richtig verinnerlichen und sich dann wieder mühevoll abgewöhnen (was i.d.R. fast nie wieder vollständig gelingt)?  Klingt nicht übermäßig sinnvoll.

Ich glaube Glory meinte, dass wenn ich irgendwann schon fitt bin, dann merke ich wo ich Fehler immer gemacht habe, wieso diese eigentlich Fehler sind und wie ich die dann lösen kann ;) richtig?

suche aber immer noch ne Lösung mit der Schleife. Bin zu doof.

[Glory]

Grütze .. äh ... Grüße!

Das "return false" kannst du dir sparen.

Nein, kann er nicht. Es zu entfernen führt zu einem grundlegend anderen Verhalten beim Klick auf das Element.

Tatsächlich? Was ist denn der Unterschied? (nimm mir bitte die Arbeit des Ausprobierens ab)

Bin zwar nicht die angesprochene Person, aber ...

Normalerweise springt der Browser dann zum Seitenanfang (href="#")

Stimmt. Dann frage ich mich, warum auf so vielen Seiten (auch SELFHTML) anstatt "#" oft "#top" benutzt wird. Wegen der Semantik??

Er soll lieber solange bei seinem Stil bleiben, bis er ihn mehr oder weniger beherrscht und dann anfangen an seinen Fehlern zu arbeiten. So mach ich das immer (und ich denke, es funktioniert ganz gut).

Er soll einen falschen Stil erst so richtig verinnerlichen und sich dann wieder mühevoll abgewöhnen (was i.d.R. fast nie wieder vollständig gelingt)?  Klingt nicht übermäßig sinnvoll.

Doch schon. Man lehrt Kinder in der Grundschule zuerst auch mit "Rest" zu rechnen und erst später die rationalen Zahlen einzuführen. Einfach weil das ganze auf einmal viel zu schwer wäre. Da ist es besser sich später ein bisschen umzugewöhnen als komplett an der Komplexität zu scheitern.
Das wird aber bei der OOP z.B. nicht gemacht. Viele Anfänger steigen direkt damit ein und haben deswegen auch so große Verständnisschwierigkeiten. "Warum soll ich denn eine Klasse erstellen, das geht doch anders viel leichter?!". Die Vorteilen erkennt man erst, nachdem man die Nachteile der anderen Vorgehensweisen erkannt hat.

[Cheatah]

Hi,

Stimmt. Dann frage ich mich, warum auf so vielen Seiten (auch SELFHTML) anstatt "#" oft "#top" benutzt wird. Wegen der Semantik??

weil "#" keinen Sinn ergibt, da es behauptet, einen Anker im Dokument zu verlinken, jedoch den Anker nicht nennt. "#top" referenziert ein Element mit id="top" (bzw. antik: ein <a name="top">).

Er soll einen falschen Stil erst so richtig verinnerlichen und sich dann wieder mühevoll abgewöhnen (was i.d.R. fast nie wieder vollständig gelingt)?  Klingt nicht übermäßig sinnvoll.
Doch schon. Man lehrt Kinder in der Grundschule zuerst auch mit "Rest" zu rechnen und erst später die rationalen Zahlen einzuführen.

"Rest" ist aber nicht falsch, sondern vereinfacht. Der Umweg über IDs ist hingegen eine Verkomplizierung, die zudem bedingt, IDs einzusetzen, ob die nun gebraucht werden oder nicht - also die HTML-Struktur ohne Not zu beschädigen.

Da ist es besser sich später ein bisschen umzugewöhnen als komplett an der Komplexität zu scheitern.

Die Erfahrung lehrt das Gegenteil.

Das wird aber bei der OOP z.B. nicht gemacht. Viele Anfänger steigen direkt damit ein und haben deswegen auch so große Verständnisschwierigkeiten. "Warum soll ich denn eine Klasse erstellen, das geht doch anders viel leichter?!". Die Vorteilen erkennt man erst, nachdem man die Nachteile der anderen Vorgehensweisen erkannt hat.

Und hat anschließend sehr, sehr viel Mühe damit, die OOP-Denkweise zu erlernen, weil eine damit inkompatible Denkweise bereits die entsprechenden Areale des Gehirns okkupiert hat. Wieso muss man eigentlich etwas dermaßen komplexes wie die Programmierung ohne einen Lehrer erlernen? Denn nur wenn man darauf verzichtet, kommt man auf die Idee, mit etwas zu beginnen, das als komplizierter zu erkennen man noch nicht die Kompetenz besitzt. Und funktionales Programmieren _ist_ komplizierter als OOP.

Cheatah