onclick li Farbe ändern

L

lahau

Mitglied
Hey,

hier mein HTML-Script:
HTML: 
<ul>
    <li style="background-color: Red" id="li1"><a id="1" href="1.html">1</a></li>
    <li style="background-color: Red" id="li2"><a id="2" href="2.html">2</a></li>
    <li style="background-color: Red" id="li3"><a id="3" href="3.html">3</a></li>

nun möchte ich das wenn man auf irgendeinen link z.b. 2 Klickt, das sich die Hintergrundsfarbe von dem li in welchem sich der link befindet li2 verändert.

Klicke ich aber danach auf einen anderen link z.b. 3, soll li2 wieder seine Ursprungs Farbe annehmen und sich das li verfärbe in welchem der neu angeklickte link sich befindet.

Ich bin schon soweit gekommen das ich erfahren habe das man dies mit onClick machen kann.

Es ist kein problem das ich die ganzen ids in den script dann rein schreibe. anders wird es denke ich auch nicht gehen.

Danke schon mal
 
Ich hab das mal eben getippt und kommentiert. Aber bitte übernimm es nicht einfach, sondern guck es dir genau an und frag evtl. noch mal nach.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Listenfarbe</title>
	
	<style type="text/css">
		#list > li {
			background-color:red;
		}
	</style>
</head>

<body>
	<div>
		<ul id="list">
			<li>Foobar</li>
			<li>Foobar</li>
			<li>Foobar</li>
			<li>Foobar</li>
			<li>Foobar</li>
			<li>Foobar</li>
			<li>Foobar</li>
			<li>Foobar</li>
		</ul>
	</div>
	
	<script type="text/javascript">
	/* <![CDATA[ */
		//Die Liste
		var list = document.getElementById('list');
		
		//Alle Elemente in der Liste
		var items = list.getElementsByTagName('li');
		
		//Das aktuell aktive Element (mit der anderen Hintergrundfarbe)
		var active = null;
		
		//Alle Elemente durchlaufen
		for(var i=0; i<items.length; i++) {
			
			//onClick Funktion für jedes Element festlegen
			items[i].onclick = function() {
			
				//Farbe des vorher geklickten zurücksetzen
				if(active != null) {
					active.style.backgroundColor = 'red';
				}
				
				//Farbe des geklickten ändern
				this.style.backgroundColor = 'green';
				
				//Das gerade geklickte Element ist jetzt das aktive
				active = this;
			};
		}
	/* ]]> */
	</script>
</body>

</html>
 
Hi DANKE!

Nein übernehmen einfach so werde ich es nicht.
Ich werde mich dann jetzt mal damit auseinander setzen und auf mein html script anwenden.
Ich benutze auch schon JS und werde deinen script direkt versuchen auszulagern.

Noch mal danke, ich melde michd ann wieder wenn ich es gescvhaft habe oder halt nicht :D
 
Also....

Habe jetzt ca. 3 Stunden mich damit beschäftigt, verstanden und muste es noch auf meinen CSS und HTML Script anpassen war garnicht mal so leicht =/
Also Top Danke und klapt alles.

Eine frage hätte ich aber noch.
Deinen Script auslagern in eine .js datei.

Im HTML Projekt:
HTML: 
<script language="JavaScript" type="text/javascript" src="Javascript.js"></script>

die Datei Javascript ist natürlich vorhanden und klapt auch denn dan stehen schon andere funktionen drin.

Ich muss doch jetzt eigentlich nur genau das:
Code: 
var list = document.getElementById('main_menu_ul');     //Die Liste
var items = list.getElementsByTagName('li');            //Alle Elemente in der Liste
var active = null;                                      //Das aktuell aktive Element (mit der anderen Hintergrundfarbe)

for (var i = 0; i < items.length; i++)                  //Alle Elemente durchlaufen
{
    items[i].onclick = function ()                      //onClick Funktion für jedes Element festlegen   
    {
        if (active != null)                             //Farbe des vorher geklickten zurücksetzen
        {
            active.style.backgroundColor = 'aqua';
        }
        this.style.backgroundColor = 'Red';             //Farbe des geklickten ändern
        active = this;                                  //Das gerade geklickte Element ist jetzt das aktive
    };
}

in die .js datei reinschareiben und schauen das es die Variabeln und funktionen nicht doppelt gibt oder nicht?

Danke noch mal
 
Ja. Aber du darfst das Skript dann nicht im Kopf der Seite einbinden, denn dann wird es ausgeführt, bevor die Liste überhaupt existiert. Deshalb steht mein Skript auch ganz am Ende der Seite.

Um Namenskonflikte zu verhindern, kannst du den Code auch einfach in eine Anonyme Funktion stecken.

Javascript: 
(function() {
var list = document.getElementById('main_menu_ul');     //Die Liste
var items = list.getElementsByTagName('li');            //Alle Elemente in der Liste
var active = null;                                      //Das aktuell aktive Element (mit der anderen Hintergrundfarbe)
 
for (var i = 0; i < items.length; i++)                  //Alle Elemente durchlaufen
{
    items[i].onclick = function ()                      //onClick Funktion für jedes Element festlegen   
    {
        if (active != null)                             //Farbe des vorher geklickten zurücksetzen
        {
            active.style.backgroundColor = 'aqua';
        }
        this.style.backgroundColor = 'Red';             //Farbe des geklickten ändern
        active = this;                                  //Das gerade geklickte Element ist jetzt das aktive
    };
}
})();

Oder du kannst den Code beim Laden der Seite ausführen. Dann kann es auch im Kopf stehen.

Javascript: 
//Falls schon jemand eine Funktion festgelegt hat. Die würde sonst überschrieben
var fn = window.onload;

window.onload = function() {
    fn();


    var list = document.getElementById('main_menu_ul');     //Die Liste
    var items = list.getElementsByTagName('li');            //Alle Elemente in der Liste
    var active = null;                                      //Das aktuell aktive Element (mit der anderen 
    Hintergrundfarbe)
 

    for (var i = 0; i < items.length; i++)                  //Alle Elemente durchlaufen
    {
        items[i].onclick = function ()                      //onClick Funktion für jedes Element festlegen   
        {
            if (active != null)                             //Farbe des vorher geklickten zurücksetzen
            {
                active.style.backgroundColor = 'aqua';
            }
            this.style.backgroundColor = 'Red';             //Farbe des geklickten ändern
            active = this;                                  //Das gerade geklickte Element ist jetzt das aktive
        };
    }
};
 
So,
da wäre auch schon meine nächste frage...

Ich habe jetzt zwei Listen in unterschiedlichen Divs:
HTML: 
<div>
     <ul id="menu1" class="menu">
          <li><a href="">Menu1.1</a></li>
          <li><a href="">Menu1.2</a></li>
     </ul>
</div>
<div>
      <ul id="menu2" class="menu">
          <li><a href="">Menu2.1</a></li>
          <li><a href="">Menu2.2</a></li>
          <li><a href="">Menu2.3</a></li>
          <li><a href="">Menu2.4</a></li>
     </ul>
</div>

Könnte ich jetzt nicht hingehen und das
Code: 
var list = document.getElementById('menu1');
durch ein
Code: 
var list = document.getElementsByClassName('menu');
ersetzen?

Danke schon mal ;)
 
Nein, weil getElementById liefert genau ein Element (oder null), wohingegen getElementsByClassName ein Array von Elementen zurück gibt. Du müsstest dann entsprechend den Code anpassen und z.B. eine weitere Schleife einbauen, um alle Element "einzusammeln".
 
Hey,

könntest du mir da noch einmal aushelfen?
Das wäre super nett von dir!


Das hier ist der Script den ich zur zeit verwende:
Code: 
var list = document.getElementById('main_menu_ul');     //Die Liste
var items = list.getElementsByTagName('li');            //Alle Elemente in der Liste
var active = null;                                      //Das aktuell aktive Element (mit der anderen Hintergrundfarbe)
for (var i = 0; i < items.length; i++)                  //Alle Elemente durchlaufen
{
    items[i].onclick = function ()                      //onClick Funktion für jedes Element festlegen   
    {
        if (active != null)                             //Farbe des vorher geklickten zurücksetzen
        {
            active.style.backgroundColor = 'aqua';
        }
        this.style.backgroundColor = 'Red';             //Farbe des geklickten ändern
        active = this;                                  //Das gerade geklickte Element ist jetzt das aktive
    };
}

Wie schon gesagt wäre super nett von dir! :)
DANKE !!
 
Ersetze die ersten beiden Zeilen durch das hier.

Javascript: 
var lists = document.getElementsByClassName('list');//Die ListeEN

var items = [];//Array für alle Elemente

for(var i=0; i<lists.length; i++) {
	//Alle Elemente der aktuellen Liste
	var tmpItems = lists[i].getElementsByTagName('li');

	//Elemente zum Array hinzufügen
	for(var k=0; k<tmpItems.length; k++) {
		items.push(tmpItems[k]);
	}
}

Du solltest aber bedenken, dass "getElementsByClassName" nicht jeder Browser kennt. Vielleicht solltest du einfach um alle deine Menüs ein DIV machen, welchem du eine ID gibst, die du dann einfach benutzt. Dann musst du in deinem Code nur die andere ID einsetzen. Der Code funktioniert für beliebig viele LI Elemente in beliebiger Tiefe.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück