HTMLの背景色を交互にするUL

HTMLの順序付けされていないリストで、背景色をなしでJQueryを使用して交互に使用したいと考えています。HTMLの背景色を交互にするUL

2011-02-23 HTweaks

あなたがこれまでに試してみましたか？ JavaScriptを使用する理由リストを動的に生成する場合は、JavaScriptなしで簡単に行うことができます。 –

私はちょうどjavascriptを使ってこれを動的にやりたかったのです！ – HTweaks

もう少し詳しくお聞かせください。私はあなたの「ポイント」を紛失しています –

最良のオプションは、CSS3に:nth-childセレクタを次のようになります。

#myul li:nth-child(odd) { 
    background-color: red; 
} 
#myul li:nth-child(even) { 
    background-color: green; 
}

または何らかの理由であなたは本当にjavascriptのソリューションが必要な場合：

<style> 
    li.even { background-color: red; } 
    li.odd { background-color: blue; } 
</style> 

var ul = document.getElementById('myul'); 
var items = ul.getElementsByTagName('li'); 
for (var i = 0; i < items.length; i++) { 
    var class = i % 2 == 0 ? 'even' : 'odd'; 
    items[i].className = class; 
}

かを既にあなただけのクラスのサーバー側を生成することができ言及。ここで

出典

2011-02-23 11:54:48 roryf

<style> 
.uneven{background-color:red;} 
.even{background-color:green;} 
</style> 
<ul> 
<li class="uneven">A</li> 
<li class="even">B</li> 
<li class="uneven">C</li> 
<li class="even">D</li> 
</ul>

おそらくポイントがありません。..

出典

2011-02-23 11:47:25

私はちょうどjavascriptを動的に言ったのですか？ – HTweaks

なぜあなたはCSSにタグをつけましたか？ – kapa

javascriptを使ってCSSを使わなければならないので、なぜですか？ – HTweaks

あなたはCSSでそれを行うことができます。 http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

これは、しかし、IEで動作しません。

出典

2011-02-23 11:53:47 Flo

、それはすでにIE9 Betaで動作します。 – kapa

あなたはどのCSSせずにページ内のすべてのULの上でそれを行うことができる方法だ - http://jsfiddle.net/2G7wx/1/

出典

2011-02-23 12:01:12

HTMLの背景色を交互にするUL

答えて

関連する問題