สีพื้นหลังสำรองสำหรับรายการ

ฉันมีรายการและแต่ละรายการเชื่อมโยงกันฉันสามารถสลับสีพื้นหลังสำหรับแต่ละรายการได้หรือไม่?

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

CSS3 ที่น่ารักบ้างล่ะ

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

หากคุณต้องการทำสิ่งนี้ใน CSS ทั้งหมดคุณจะมีคลาสที่คุณกำหนดให้กับรายการทางเลือกแต่ละรายการ เช่น

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

หากรายการของคุณถูกสร้างขึ้นแบบไดนามิกงานนี้จะง่ายกว่ามาก

หากคุณไม่ต้องการอัปเดตเนื้อหานี้ด้วยตนเองทุกครั้งคุณสามารถใช้ไลบรารี jQuery และใช้สไตล์สลับกับแต่ละ<li>รายการในรายการของคุณ:

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

และรหัส jQuery ของคุณ:

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

คุณสามารถบรรลุสิ่งนี้ได้โดยการเพิ่มคลาสสไตล์ที่สลับกันไปยังแต่ละรายการ

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

แล้วจัดแต่งทรงผมตามชอบ

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

คุณสามารถทำให้กระบวนการนี้เป็นไปโดยอัตโนมัติเพิ่มเติมด้วยจาวาสคริปต์ (ตัวอย่าง jQuery ด้านล่าง)

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

ลองเพิ่มแอตทริบิวต์คลาสคู่หนึ่งพูดว่า 'คู่' และ 'คี่' เพื่อสลับองค์ประกอบรายการเช่น

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

ในส่วน <style> ของหน้า HTML หรือในสไตล์ชีตที่เชื่อมโยงคุณจะต้องกำหนดคลาสเดียวกันเหล่านั้นโดยระบุสีพื้นหลังที่คุณต้องการ:

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

คุณอาจต้องการใช้ไลบรารีเทมเพลตเนื่องจากความต้องการของคุณพัฒนาขึ้นเพื่อให้คุณมีความยืดหยุ่นมากขึ้นและลดการพิมพ์ลง ทำไมพิมพ์องค์ประกอบรายการทั้งหมดด้วยมือ?

เนื่องจากคุณใช้ HTML มาตรฐานคุณจะต้องกำหนดคลาสแยกและตั้งค่าแถวเป็นคลาสด้วยตนเอง

คุณสามารถทำได้โดยระบุชื่อคลาสสลับกันบนแถว ฉันชอบใช้row0และrow1ซึ่งหมายความว่าคุณสามารถเพิ่มได้อย่างง่ายดายหากรายการถูกสร้างขึ้นโดยใช้โปรแกรม:

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

อีกวิธีหนึ่งคือการใช้จาวาสคริปต์ jQuery ถูกใช้ในตัวอย่างนี้:

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

แก้ไข: ฉันไม่รู้ว่าทำไมฉันจึงยกตัวอย่างโดยใช้แถวตาราง ... แทนที่trด้วยliและtableด้วยulและใช้กับตัวอย่างของคุณ

หากคุณใช้โซลูชัน jQuery มันจะทำงานบน IE8:

jQuery

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

CSS

.alternate {
background: black;
}

หากคุณใช้ CSS soloution มันจะไม่ทำงานบน IE8:

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

นี่คือการตั้งค่าสีพื้นหลังใน li คู่และคี่:

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

คุณสามารถเข้ารหัสลำดับได้โดยการฮาร์ดโค้ดดังนี้:

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

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