सूची आइटमों के लिए वैकल्पिक पृष्ठभूमि रंग

Question

मेरे पास एक सूची है, और प्रत्येक आइटम लिंक है, क्या कोई तरीका है कि मैं प्रत्येक आइटम के लिए पृष्ठभूमि रंगों को वैकल्पिक कर सकता हूं?

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

Answer 1

कुछ प्यारे CSS3 के बारे में कैसे?

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

Answer 2

आप कर सकते हैं अनुक्रम में हार्डकोड, इसलिए तरह से:

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

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

Answer 3

आप प्रत्येक सूची आइटम

<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'); 
}); 

Answer 4

जब से तुम मानक HTML का उपयोग कर आप के लिए अलग वर्ग को परिभाषित करने की आवश्यकता होगी और मैनुअल वर्गों के लिए पंक्तियों की स्थापना की।

Answer 5

आप पंक्तियों पर वैकल्पिक वर्ग नाम निर्दिष्ट करके इसे कर सकते हैं। मैं row0 और row1 का उपयोग कर पसंद करते हैं, जिसका मतलब है कि आप आसानी से उन्हें, में जोड़ सकते हैं, तो सूची प्रोग्राम के रूप में बनाया जा रहा है:

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

एक और तरीका है जावास्क्रिप्ट का उपयोग करने के लिए होगा। jQuery इस उदाहरण में प्रयुक्त की जा रही है:

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

संपादित करें: मैं कारण है कि मैं तालिका पंक्तियों का उपयोग कर उदाहरण भी दिए नहीं पता ... ul साथ li साथ tr और table की जगह है और यह आपके उदाहरण के लिए लागू होता

Answer 6

यदि आप इसे पूरी तरह से सीएसएस में करना चाहते हैं तो आपके पास एक कक्षा होगी जो आप प्रत्येक वैकल्पिक सूची आइटम को असाइन करेंगे। जैसे

<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'); 
}); 

Answer 7

कोशिश वर्ग की एक जोड़ी जोड़ने विशेषताओं कहते हैं, 'यहां तक ​​कि' और 'अजीब' की सूची तत्वों, जैसे बारी करने के लिए,

<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 पृष्ठ के एक < शैली > अनुभाग में, या किसी लिंक किए गए स्टाइलशीट में, आप उन्हीं वर्गों को परिभाषित होता है, अपने वांछित पृष्ठभूमि रंग निर्दिष्ट करने:

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

आप एक का उपयोग करना चाहें टेम्पलेट लाइब्रेरी आपकी आवश्यकताओं के रूप में आपको अधिक लचीलापन प्रदान करने और टाइपिंग पर कटौती करने के लिए विकसित होती है। उन सभी सूची तत्वों को हाथ से क्यों टाइप करें?

Answer 8

आप jQuery समाधान का उपयोग अगर यह IE8 पर काम करेगा:

jQuery

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

सीएसएस

.alternate { 
background: black; 
} 

आप सीएसएस soloution का उपयोग करते हैं यह जीता काम नहीं ओ n IE8:

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

Answer 9

यह भी और अजीब ली पर पृष्ठभूमि रंग सेट है:

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