CSS Buttons und Onclick

[jimmy]

Hallo zusammen,

ich habe mehrere CSS-formatierte Buttons nebeneinander die bei mouseover die Farbe ändern. Jeder Button soll ein onclick (bzw. ein href) bekommen um eine javascript Funktion aufzurufen. Zusätzlich möchte ich, dass jeweils der zuletzt angeklickte Button die Farbe solange ändert bis ein anderer dieser Buttons angeklickt wird.

Kann mir jemand einen Tipp geben was ich ändern/hinzufügen muss damit der angeklickte Button die Farbe behält???
Bisher siehts so aus:

<ul id="Navigation" >  
 <li><a onclick ="ButtonClick(1)">Bsp1</a></li>  
 <li><a href="javascript:ButtonClick(4)">Bsp2</a></li>  
</ul>

ul#Navigation {  
    margin: 0; padding: 0.8em;  
    text-align: center;  
	width:auto;  
    background-color: #FFFFFF;  
  }  
  
ul#Navigation li {  
    list-style: none;  
    display: inline;  
    margin: 0.4em; padding: 0;  
  }  
  
ul#Navigation a, ul#Navigation span {  
    padding: 0.2em 1em;  
    text-decoration: none; font-weight: bold;  
    border: 1px solid black;  
    border-left-color: white; border-top-color: white;  
    color:#ACD697; background-color: #735539;  
  }  
  
ul#Navigation a:hover, ul#Navigation span {  
    border-color: white;  
    border-left-color: black; border-top-color: black;  
    color: #735539; background-color: #ACD697;  
  }  

Danke!

[Gunnar Bittersmann]

@@jimmy:

nuqneH

ich habe mehrere CSS-formatierte Buttons

Nein, du hast Links.

Kann mir jemand einen Tipp geben was ich ändern/hinzufügen muss

Eine Navigation, die ohne JavaScript benutzbar ist.

damit der angeklickte Button die Farbe behält???

Um deren Darstellung kümmerst du dich später.

Beschreib doch mal bitte, was du eigentlich erreichen möchtest. Damit meine ich nicht die Darstellung, sondern deine Navigation.

Qapla'

[jimmy]

Ok,

also ich habe Links (die aufgrund ihrer CSS Eigenschaften aussehen wie Buttons)

diese Links rufen eine javascript Funktion auf, die mit Hilfe von Ajax einen Request auf eine Datenbank sendet und das Ergebnis dann in einem div weiter unten auf der Seite anzeigt.
Jeder Button steht für einen unterschiedlichen Request.

Soweit funktioniert alles.

Ich möchte jetzt nur noch die Hintergrundfarbe der Links ändern. Nach dem onclick soll die Farbe geändert werden und wieder zurückgesetzt wenn ein anderer link angeklickt wird.

Ich hoffe das war halbwegs verständlich...

[Matthias Apsel]

Om nah hoo pez nyeetz, jimmy!

diese Links rufen eine javascript Funktion auf, ... Ich möchte jetzt nur noch die Hintergrundfarbe der Links ändern. Nach dem onclick soll die Farbe geändert werden und wieder zurückgesetzt wenn ein anderer link angeklickt wird.

Füge der Funktion ein Feature hinzu, das die Klassenzugehörigkeit der Verweise ändert.

Matthias

[jimmy]

Vielen Dank für die Antwort,

ich habe jetzt eine Lösung gefunden.
Im CSS habe ich jetzt noch die Pseudoklasse focus

ul#Navigation a:focus

hinzugefügt. Das funktioniert aber nur wenn ich die links mit

href="javascript:ButtonClick(4)"

und nicht mit

onclick ="ButtonClick(4)"

anspreche. Aber das macht nix.

Danke nochmal.

[MudGuard]

Hi,

ich habe jetzt eine Lösung gefunden.
Im CSS habe ich jetzt noch die Pseudoklasse focus

Der Fokus geht dem Link aber auch verloren, wenn man irgendwo in die Seite klickt, nicht nur, wenn man auf einen Link in der "Navigation" klickt  ...

cu,
Andreas

[jimmy]

Der Fokus geht dem Link aber auch verloren, wenn man irgendwo in die Seite klickt, nicht nur, wenn man auf einen Link in der "Navigation" klickt  ...

Oh ja, das stimmt, schade,  da muss ich wohl nochmal was ändern

[Gunnar Bittersmann]

@@jimmy:

nuqneH

Oh ja, das stimmt, schade,  da muss ich wohl nochmal was ändern

Und dann auch auch Event-Delegation einsetzen anstatt jedem einzelnen 'a'-Element einen Eventhandler zu verpassen. [molily]

Qapla'

[Gunnar Bittersmann]

@@jimmy:

nuqneH

diese Links rufen eine javascript Funktion auf, die mit Hilfe von Ajax einen Request auf eine Datenbank sendet und das Ergebnis dann in einem div weiter unten auf der Seite anzeigt.

Hm, und was sind das für Daten? Die Inhalte deiner Website? Dann können die nicht allzu wichtig sein, wenn du sie etlichen Besuchern deiner Website vorenthältst; darunter äußerst wichtigen.

Qapla'