[jQuery] Einzelnes List-Item dynamisch formatieren

[Tronjer]

Hier handelt es sich eigentlich um eine kombinierte CSS / jQuery Frage. Ich möchte, analog zu unterem Bild, eine Produktliste erstellen, welche die Produkte nach unterschiedlichen Kategorien sortiert ausgibt, ohne dass bei der Kategorie-Auswahl eine neue Seite geladen werden muss. In PHP und HTML ist das soweit auch fertig und nun fehlt mir noch das CSS. Die Idee ist, dass der Menüpunkt der jeweils aktiven Kategorie dieselbe Hintergrundfarbe wie die Produktliste annehmen soll, die inaktiven Menüpunkte hingegen schwarz bleiben. Die Navigation habe ich als <ul> mit display:block und float:left erstellt und dazu ein kleines Script erstellt:

$(document).ready(function(){
  $("ul li").click(function(){
      $(this).addClass("aktiv");
  });
});

Das funktioniert aber leider nicht. Weil ich damit einerseits nicht das Element selektieren kann, und andererseits auch die Zuweisung einer statischen CSS-Klasse zu einem einzelnen list-element keine Veränderung der visuellen Darstellung im Browser bewirkt. Hat jemand vielleicht einen Tipp, wie man so etwas hin bekommt?

 

[Tronjer]

Hmm, hat niemand eine Idee? :cry:

Ich kann das Erscheinungsbild einzelner Listenpunkte zwar verändern, in dem ich die Texte in spans setze, oder den Ankern Klassen zuweise, aber bei der dynamischen Zuweisung über jQuery wirkt sich das wie die Pseudo-Elemente in CSS aus. So wie die Maus aus dem Bereich bewegt wird, nimmt das vorherige Item wieder seine ursprüngliche Hintergrundfarbe an.

Eventuell gäbe es ja noch die Möglichkeit, mit JavaScript die Texte der List-Items in Variablen zu speichern und über eine Schleife oder Kontrollstruktur kontextabhängig Klassen zu laden, aber ich hatte eigentlich auf eine einfache jQuery-Lösung gehofft.

 

[Tronjer]

Ok, ich habe das nun selbst herausgefunden. An sich ist es ganz einfach, sofern man etwas länger drüber nachdenkt.

Hier die Lösung, falls jemand mal ein ähnliches Problem hat:



Aufgabe war, eine Navigationsleiste so zu formatieren, dass beim Klick der jeweilige Button eine neue Hintergrundfarbe (hellgrau) annimmt, die auch erhalten bleibt, wenn man den Mauszeiger weiterbewegt. Ebenso soll beim Laden der Seite der erste Menüpunkt bereits hellgrau hervorgehoben sein, aber schwarz werden, sobald ein anderer Button angeklickt wird.

Dazu erstellen wir zuerst ein HTML-Dokument, und weisen jedem Anker die Klasse .list-item zu. Der erste Button erhält zusätzlich noch die Klasse .first

<h1>Dies ist eine Liste</h1>

        <div id="produkte">
            <ul>
                <li>
                    <a href="#" class="list-item first">Kategorie 1</a>
                </li>
                <li>
                    <a href="#" class="list-item">Kategorie 2</a>
                    
                </li>
                <li><a href="#" class="list-item">Kategorie 3</a></li>
            </ul>
        </div>

Im CSS definieren wir nun ein schwarzes Hintergrundbild für die Klasse .list-item, das beim Klick durch ein graues ausgetauscht wird. Das graue Bild wird außerdem noch der Klasse .first zugewiesen.

a.list-item {background-image: url(schwarz.png); background-repeat: repeat-x;}          
                            
a.list-item:hover, a.list-item:focus, a.list-item:active {background-image: url(grau.png); background-repeat: repeat-x;}

a.first{background-image: url(grau.png); background-repeat: repeat-x;}

Zum Schluss noch etwas jQuery, um das Grau vom ersten Button zu entfernen, sobald ein anderer Menüpunkt angeklickt wird.

 $(document).ready(function(){
    $(this).click(function(){
       $('#produkte a').eq(0).removeClass('first');
   });
});

 

[mermshaus]

Auch wenn's gelöst ist: Deine Problemschilderung ergab für mich keinen Sinn. Speziell das hier:

$(document).ready(function(){
  $("ul li").click(function(){
      $(this).addClass("aktiv");
  });
});

Das funktioniert aber leider nicht. Weil ich damit einerseits nicht das Element selektieren kann, und andererseits auch die Zuweisung einer statischen CSS-Klasse zu einem einzelnen list-element keine Veränderung der visuellen Darstellung im Browser bewirkt.

Das sollte wunderbar klappen:

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>Demo</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
            /*<![CDATA[*/

            $(function () {
                $('li:first').addClass('selected');

                $('li').click(function () {
                    $(this).parent().children('.selected').removeClass('selected');
                    $(this).addClass('selected');
                });
            });

            /*]]>*/
        </script>
        <style type="text/css">
            /*<![CDATA[*/

            .selected {
                background: red;
            }

            /*]]>*/
        </style>
    </head>

    <body>
        
        <ul>
            <li>eins</li>
            <li>zwei</li>
            <li>drei</li>
            <li>vier</li>
        </ul>

    </body>

</html>

 

[Tronjer]

Ich habe die Seite mal analog zu deinem Beispiel umgeschrieben. Allerdings hapert es noch mit dem CSS.

Das Beispiel hier funktioniert:

<!DOCTYPE html>
<html>
    <head>
        <title>Navigation</title>
        <script type="text/javascript" src="models/jquery-1.6.1.min.js">
        </script>
        <style type="text/css">
            body {
                font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
                font-size: 12px;
            }
            
            #produkte ul {
                list-style: none;
                margin: 0;
                padding: 0;
            }
            
            #produkte a {
                color: #fff;
                text-decoration: none;
            }
            
            li {
                float: left;
                color: white;
                font-size: 11px;
                text-align: center;
                line-height: 35px;
                width: 100px;
                height: 37px;
                display: block;
                background-image: url(../media/gradient3-bg.png);
                background-repeat: repeat-x;
            }
            
            .selected {
                background-image: url(../media/gradient-bg.png);
            }
        </style>
        <script type="text/javascript">
            
            $(document).ready(function(){
                $('#produkte li:first').addClass('selected');
                $('#produkte li').click(function(){
                    $(this).parent().children('.selected').removeClass('selected');
                    $(this).addClass('selected');
                });
            });
        </script>
    </head>
    <body>
        <div id="produkte">
            <ul>
                <li>
                    <a href="#">Kategorie 1</a>
                </li>
                <li>
                    <a href="#">Kategorie 2</a>
                </li>
                <li>
                    <a href="#">Kategorie 3</a>
                </li>
            </ul>
        </div>
    </body>
</html>

Wenn ich nun allerdings im CSS dem <li> Selektor das <div> voran stelle, also:

#produkte li { .... }

schreibe, dann wird die Klasse .selected zwar durch jQuery hinzugefügt, aber die Hintergrundfarbe ändert sich trotzdem nicht. Woran könnte das liegen?