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

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>

Comments

इसे "टाइगर स्ट्रिपिंग" के रूप में भी जाना जाता है और नहीं, मैं मज़ाक नहीं कर रहा हूँ

— जेफ एटवुड

Answer 1

कैसे कुछ सुंदर CSS3 के बारे में?

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

Comments

@ अदम सी क्या आप इसे गतिशील सूची-दृश्य के लिए लागू करने का एक तरीका सुझा सकते हैं? जब मैंने इसे डायनामिक लिस्ट-व्यू के साथ आज़माया, जहाँ डेटा वेब-सर्विस से आ रहा था, यह काम नहीं किया!

— SKT

क्या किसी के पास इसका उदाहरण है जो नेस्टेड सूचियों के साथ अच्छी तरह से काम करता है? अर्थात्, नेस्टेड सूची में पहले आइटम की पृष्ठभूमि का रंग, ned सूची से ठीक पहले सूची आइटम के पृष्ठभूमि रंग के विपरीत रंग होगा। इसके अलावा, मूल सूची के अगले सूची आइटम की पृष्ठभूमि का रंग नेस्टेड सूची में अंतिम सूची आइटम के पृष्ठभूमि रंग के विपरीत है।

— एलएस

कोई पहला कथन छोड़ सकता है ताकि मौजूदा पृष्ठभूमि रंग का उपयोग किया जा सके।

— xilef

Answer 2

यदि आप यह पूरी तरह से 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');
});

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

वर्ग तत्वों की एक जोड़ी को जोड़ने का प्रयास करें, सूची तत्वों को वैकल्पिक करने के लिए 'सम' और 'विषम', जैसे

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

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

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

Answer 5

चूंकि आप मानक HTML का उपयोग कर रहे हैं, इसलिए आपको पंक्तियों को वर्गों के लिए अलग और मैनुअल सेट करने की आवश्यकता होगी।

Comments

यह और तथ्य यह है कि आप स्वीकार किए गए उत्तर की तरह प्रभाव के बाद एक जावास्क्रिप्ट के साथ स्वचालित रूप से कर सकते हैं। मैं आपको एक सही उत्तर के लिए +1 देना चाहता था।

— कार्ल

Answer 6

आप इसे पंक्तियों पर वैकल्पिक वर्ग नामों को निर्दिष्ट करके कर सकते हैं। मैं उपयोग करना पसंद करता हूं 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हैं और यह आपके उदाहरण पर लागू होता है

Answer 7

यदि आप jQuery समाधान का उपयोग करते हैं तो यह IE8 पर काम करेगा :

jQuery

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

सीएसएस

.alternate {
background: black;
}

यदि आप CSS सॉल्यूशन का उपयोग करते हैं तो यह IE8 पर काम नहीं करेगा :

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

Answer 8

यह पृष्ठभूमि का रंग सम और विषम ली पर सेट है:

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

Answer 9

आप अनुक्रम को हार्डकोड करके ऐसा कर सकते हैं:

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

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

Comments

कि गधे में एक बड़े पैमाने पर दर्द है और यह IE6 में काम नहीं करता है :(

— निक डेफ़

@nickf हाँ। मुझे लगता है कि "उचित" तरीके में CSS3 शामिल है और इसके आगे कुछ भी समर्थन नहीं करता है।

— sblundy