1

私はワードプレスのテーマを作成していて、各liの背景色が異なるナビゲーションバーを作成しようとしています（たとえば、赤、緑、青）。次に、最初の3色が使用された後、それらを再び繰り返します。

たとえば、次のようになります。

<div id="top-nav">
    <ul>
        <a href="#"><li>Hampstead</li></a> background red
        <a href="#"><li>Topsail Beach</li></a> background blue
        <a href="#"><li>North Topsail Beach</li></a> background green
        <a href="#"><li>Surf City</li></a> background red
        <a href="#"><li>Holly Ridge</li></a> background blue
        <a href="#"><li>Sneads Ferry</li></a> background green
    </ul>
</div>

liの子番号を認識するためにjavascriptが必要になると思います。

誰かが私がこれをどのように行うことができるかについて何か洞察を得ましたか？

お時間をいただきありがとうございます。

4

1 に答える 1

4

css nth-childセレクターを使用すると、Javascriptなしでこれを簡単に実現できます。次のようなものを試してください

li:nth-child(3n)
{
  background:red;
}
li:nth-child(3n-1) 
{
  background:blue;
}
li:nth-child(3n-2) 
{
  background:green;
}

また、jQueryを使用してこれを行う場合、jQueryには独自のn番目の子セレクターがあるため、ほとんど同じです。すると、次のようになります

$("li:nth-child(3n)").css('background-color', 'red');
$("li:nth-child(3n-1)").css('background-color', 'blue');
$("li:nth-child(3n-2)").css('background-color', 'green');
于 2013-01-24T18:53:33.143 に答える