Liste öğeleri için alternatif arka plan renkleri

Bir listem var ve her öğe bağlantılı, her öğe için arka plan renklerini değiştirebilmemin bir yolu var mı?

<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>

Güzel bir CSS3'e ne dersiniz?

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

Bunu tamamen CSS'de yapmak istiyorsanız, her bir alternatif liste öğesine atayacağınız bir sınıfınız olur. Örneğin

<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>

Listeniz dinamik olarak oluşturulmuşsa, bu görev çok daha kolay olacaktır.

Bu içeriği her seferinde manuel olarak güncellemek zorunda kalmak istemiyorsanız, jQuery kitaplığını kullanabilir ve <li>listenizdeki her öğeye dönüşümlü olarak bir stil uygulayabilirsiniz :

<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>

Ve jQuery kodunuz:

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

Her liste öğesine alternatif stil sınıfları ekleyerek bunu başarabilirsiniz.

<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>

Ve sonra onu şöyle şekillendir

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

Bu işlemi javascript ile daha da otomatik hale getirebilirsiniz (aşağıdaki jQuery örneği)

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

Alternatif liste öğelerine "çift" ve "tek" gibi bir çift sınıf özelliği eklemeyi deneyin, ör.

<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>

HTML sayfasının bir <style> bölümünde veya bağlantılı bir stil sayfasında, aynı sınıfları, istediğiniz arka plan renklerini belirterek tanımlarsınız:

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

Size daha fazla esneklik sağlamak ve yazmayı azaltmak için ihtiyaçlarınız geliştikçe bir şablon kitaplığı kullanmak isteyebilirsiniz. Neden tüm bu liste öğelerini elle yazasınız?

Standart HTML kullandığınız için, sınıflar için ayrı bir sınıf tanımlamanız ve satırları sınıflara manuel olarak ayarlamanız gerekecektir.

Satırlarda alternatif sınıf isimleri belirleyerek bunu yapabilirsiniz. Ben row0ve kullanmayı tercih ederim row1, bu da liste programlı olarak oluşturuluyorsa bunları kolayca ekleyebileceğiniz anlamına gelir:

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

Başka bir yol da javascript kullanmaktır. Bu örnekte jQuery kullanılmaktadır:

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

Düzenleme: Neden tablo satırlarını kullanarak örnekler verdiğimi bilmiyorum ... trile live tableile değiştirin ve ulörneğiniz için geçerlidir

JQuery çözümünü kullanırsanız, IE8 üzerinde çalışacaktır :

jQuery

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

CSS

.alternate {
background: black;
}

CSS çözümünü kullanırsanız, IE8 üzerinde çalışmayacaktır :

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

Bu, çift ve tek li için arka plan rengidir:

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

Sıralamayı kodlayarak yapabilirsiniz:

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

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