Alternative Hintergrundfarben für Listenelemente

Ich habe eine Liste und jedes Element ist verknüpft. Gibt es eine Möglichkeit, die Hintergrundfarben für jedes Element zu ändern?

<ul>
    <li><a href="link">Link 1</a></li>
    <li><a href="link">Link 2</a></li>
    <li><a href="link">Link 3</a></li>
    <li><a href="link">Link 4</a></li>
    <li><a href="link">Link 5</a></li>
</ul>

Wie wäre es mit einem schönen CSS3?

li { background: green; }
li:nth-child(odd) { background: red; }

Wenn Sie dies nur in CSS tun möchten, haben Sie eine Klasse, die Sie jedem alternativen Listenelement zuweisen würden. Z.B

<ul>
    <li class="alternate"><a href="link">Link 1</a></li>
    <li><a href="link">Link 2</a></li>
    <li class="alternate"><a href="link">Link 3</a></li>
    <li><a href="link">Link 4</a></li>
    <li class="alternate"><a href="link">Link 5</a></li>
</ul>

Wenn Ihre Liste dynamisch generiert wird, ist diese Aufgabe viel einfacher.

Wenn Sie diesen Inhalt nicht jedes Mal manuell aktualisieren müssen, können Sie die jQuery-Bibliothek verwenden und abwechselnd einen Stil auf jedes <li>Element in Ihrer Liste anwenden :

<ul id="myList">
    <li><a href="link">Link 1</a></li>
    <li><a href="link">Link 2</a></li>
    <li><a href="link">Link 3</a></li>
    <li><a href="link">Link 4</a></li>
    <li><a href="link">Link 5</a></li>
</ul>

Und dein jQuery-Code:

$(document).ready(function(){
  $('#myList li:nth-child(odd)').addClass('alternate');
});

Sie können dies erreichen, indem Sie jedem Listenelement abwechselnde Stilklassen hinzufügen

<ul>
    <li class="odd"><a href="link">Link 1</a></li>
    <li><a href="link">Link 2</a></li>
    <li class="odd"><a href="link">Link 2</a></li>
    <li><a href="link">Link 2</a></li>
</ul>

Und dann wie es stylen

li { backgorund:white; }
li.odd { background:silver; }

Sie können diesen Prozess mit Javascript weiter automatisieren (jQuery-Beispiel unten).

$(document).ready(function() {
  $('table tbody tr:odd').addClass('odd');
});

Fügen Sie abwechselnd Listenelementen ein Paar Klassenattribute hinzu, z. B. "gerade" und "ungerade", z

<ul>
    <li class="even"><a href="link">Link 1</a></li>
    <li class="odd"><a href="link">Link 2</a></li>
    <li class="even"><a href="link">Link 3</a></li>
    <li class="odd"><a href="link">Link 4</a></li>
    <li class="even"><a href="link">Link 5</a></li>
</ul>

In einem <style> -Abschnitt der HTML-Seite oder in einem verknüpften Stylesheet definieren Sie dieselben Klassen und geben dabei die gewünschten Hintergrundfarben an:

li.even { background-color: red; }
li.odd { background-color: blue; }

Möglicherweise möchten Sie eine Vorlagenbibliothek verwenden, wenn sich Ihre Anforderungen ändern, um Ihnen mehr Flexibilität zu bieten und die Eingabe zu reduzieren. Warum all diese Listenelemente von Hand eingeben?

Da Sie Standard-HTML verwenden, müssen Sie eine separate Klasse für die Klassen definieren und die Zeilen manuell auf die Klassen festlegen.

Sie können dies tun, indem Sie in den Zeilen abwechselnde Klassennamen angeben. Ich bevorzuge die Verwendung von row0und row1, was bedeutet, dass Sie sie einfach hinzufügen können, wenn die Liste programmgesteuert erstellt wird:

for ($i = 0; $i < 10; ++$i) {
    echo '<tr class="row' . ($i % 2) . '">...</tr>';
}

Eine andere Möglichkeit wäre die Verwendung von Javascript. In diesem Beispiel wird jQuery verwendet:

$('table tr:odd').addClass('row1');

Edit: Ich weiß nicht , warum ich gab Beispiele von Tabellenzeilen mit ... ersetzen trmit liund tablemit ulund es gilt für Ihr Beispiel

Wenn Sie die jQuery-Lösung verwenden, funktioniert sie unter IE8:

jQuery

$(document).ready(function(){
$('#myList li:nth-child(odd)').addClass('alternate');
});

CSS

.alternate {
background: black;
}

Wenn Sie die CSS-Lösung verwenden, funktioniert sie unter IE8 nicht:

li:nth-child(odd) {
    background: black;
}

Dies ist die Hintergrundfarbe für gerade und ungerade li:

  li:nth-child(odd) { background: #ffffff; }
  li:nth-child(even) { background: #80808030; }

Sie können die Sequenz wie folgt fest codieren:

li, li + li + li, li + li + li + li + li {
  background-color: black;
}

li + li, li + li + li + li {
  background-color: white;
}