css Navigation, Liste, Hintergrundfarbe ändern?

[Micha]

Hallo allerseits,

ich habe eine Navigation aus einer einfache Html-Liste die via css formatiert ist (Quelle: SelfHtml). Ich möchte gern das wann immer man einen dieser Listenpunkte drückt, sich die Hintergrundfarbe des Listenelements ändert und "stehen bleibt". Damt der User erkennen kann wo er ist bzw. was er gedrückt hat. Die Frage ist wie kan ich via Javascript auf dieses Listenelement und deren Eigenschaft (die backgroundColor!) ändern?

Code::

.. die .css Anweissungen

body, p a {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: white;
  }

ul#Navigation {
    width: 10em;
    margin: 0; padding: 0.8em;
    border: 1px solid black;
    background-color: silver;
  }
  * html ul#Navigation {  /* Korrekturen fuer IE 5.x */
    width: 11.6em;
    w\idth: 10em;
    padding-left: 0;
    padd\ing-left: 0.8em;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0.4em; padding: 0.2em;
    border: 1px solid gray;
    background-color: #eee;
  }

ul#Navigation a {
    text-decoration: none; font-weight: bold;
    color: maroon; background-color: #ccc;
  }
  ul#Navigation a:hover {
    color: white; background-color: gray;
  }

... meine Html-Liste

<ul id="Navigation">
    <li id="listelement1"><a href="#" onClick="changeBgColor();">Beispiel 1</a></li>
    <li id="listelement2"><a href="#">Beispiel 2</a></li>
    <li id="listelement3"><a href="#">Beispiel 3</a></li>
  </ul>

... und der JavascriptVersuch ;-))

function changeBgColor() {
  document.all.listelement1.style.backgroundColor = "yellow";
}

.. Genau dieser funktioniert nicht. Ich kann also nicht auf diese
Eigenschaft auf diese Art zugreifen.
Wie geht das?

Vielen Danke und Gruß
Micha

[wahsaga]

hi,

document.all.listelement1.style.backgroundColor = "yellow";
.. Genau dieser funktioniert nicht.

Nee, document.all ist ja auch IE-Murks.

Übergebe hier

<li id="listelement1"><a href="#" onClick="changeBgColor();">Beispiel 1</a></li>

schon beim Aufruf der Funktion das Element:

<li id="listelement1"><a href="#" onClick="changeBgColor(this);">Beispiel 1</a></li>

In der Funktion, die du jetzt mit
function changeBgColor(objekt) { ... }
deklarierst, hast du dann über objekt Zugriff auf das Element, und kannst dessen Style-Eigenschaften ändern.

gruß,
wahsaga

[Micha]

Hi wahsage,

danke Dirfür die schnelle Hilfe!

In der Funktion, die du jetzt mit
function changeBgColor(objekt) { ... }
deklarierst, hast du dann über objekt Zugriff auf das Element, und kannst dessen Style-Eigenschaften ändern.

Noch eine Frage ... wie genau ist die syntax im Javascript-Teil?

document.objekt.style.backgroundColor = "yellow";

funktioniert nicht!!! Wie mache ich das richtig?

gruß
Micha

[wahsaga]

hi,

Noch eine Frage ... wie genau ist die syntax im Javascript-Teil?

document.objekt.style.backgroundColor = "yellow";

funktioniert nicht!

Natürlich nicht - woher sollte document denn ein Unterobjekt objekt haben?

Wie mache ich das richtig?

Du hast ein Objektreferenz als Parameter an eine Funktion übergeben.
Wie du mit denen umgehst, erfährst du im Kapitel über Funktionen.

gruß,
wahsaga