2012-05-08 11 views
2

私はOpencartサイトで作業しています。左側のカテゴリでは、別の色で交替する必要があります。赤、紫、緑、青などを選択し、さらに多くのカテゴリがメニューに追加されると繰り返されます。ダイナミックメニューの色を交互に変更する

これを行う最も簡単な方法は誰にでも分かりますか?

あなたは下のサイトを閲覧することができます:私はOpencartに精通していないですが、これはCSSで実現することはできません http://getsmarta.co/_ecommerce/easy-leaf/

+0

旧式のブラウザとの互換性に関心がなければ、n番目の子CSSルートに行きます。参考までにhttp://css-tricks.com/how-nth-child-works/を参照してください。古いブラウザを使用している人に懸念がある場合(私はIE8がn番目の子供をサポートしているとは思わない)、私は間違いなくサーバー側のルートに行きます。ライブデモのための – Snuffleupagus

答えて

3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      var color = ['Red', 'Green', 'Yellow']; 

      $('ul#test').find('li').each(function (i) { 
       $(this).addClass(color[((i + 3) % 3)]); 
      }); 
     }); 
    </script> 
    <style type="text/css"> 
     .Red 
     { 
      background-color: Red; 
     } 

     .Green 
     { 
      background-color: Green; 
     } 

     .Yellow 
     { 
      background-color: Yellow; 
     } 
    </style> 
</head> 
<body> 
    <ul id="test"> 
     <li>a</li><li>b</li><li>c</li> 
     <li>a</li><li>b</li><li>c</li> 
     <li>a</li><li>b</li><li>c</li> 
     <li>a</li><li>b</li><li>c</li> 
    </ul> 
</body> 
</html> 
+0

このリンクを参照してください:http://jsfiddle.net/nanoquantumtech/UStdZ/ – Thulasiram

2

?あなたはおそらく、この仕事をするためにn番目の子供のことを使うことができます。 または、forループとcolour1、colour2などのクラス名を使用して、jqueryを使用して色を付けることができます。色の数をループし、各要素にaddClass()を実行します。 おそらくもっと良い解決策があります。

編集:あなたはjqueryのと同じ概念を使用して、ページ自体に色のクラスを追加する場合を除き、jqueryのソリューションが良いでしょうので、[OK]を多分n番目の子は、以前のブラウザのために良いではありません

2

私はこのサーバー側をやっています。私はあなたのコードを与えていないです

$i = 0; 
// loop through rows 
$i++; 
$alt=false; 
if ($i % 2 == 0) { 
$alt = true; 
} 
// output row 
// make sure to use a if ($alt) { echo 'class="alt""'; } or something similar so you can style away 
// end loop 
-2

:部品コード/パーツで

はあなたが記入する必要がありますことをコメントしています。それをあなた自身で書いてください。ここに考えがあります。

  1. 4色の4つのクラスを作成します。
  2. liアイテムに正しいクラスを追加する関数を作成します。つまり、 はli項目の位置を確認し、正しい項目を追加することができます。

これを行うにはjavascriptまたはphpを使用できます。 新しいカテゴリを追加すると、リンクの色が自動的に変わります。

関連する問題