2

我在 Opencart 网站上工作，对于左侧的类别，我需要它们以不同的颜色交替显示，例如。红色，紫色，绿色，蓝色等，然后​​在菜单中添加更多类别时重复。

谁能给我建议最简单的方法来做到这一点？

您可以查看以下网站：http: //getsmarta.co/_ecommerce/easy-leaf/

4

4 回答 4

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>
于 2012-05-08T14:47:25.097 回答
2

我对Opencart不熟悉，但这不能用css实现吗？您很可能使用第 n 个子事物来完成这项工作。或者，您可以使用 jquery 为它着色，使用 for 循环和 colour1、 colour2 等的类名。循环遍历颜色数量并将 addClass() 添加到每个元素。可能有更好的解决方案，这些就是现在出现的。

编辑：好的，也许第 n 个孩子对早期的浏览器不好，所以 jquery 解决方案会很好，除非你想使用与 jquery 相同的概念在页面本身中添加颜色类

于 2012-05-08T14:42:11.557 回答
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
于 2012-05-08T14:48:22.117 回答
-2

我没有给你代码。自己写吧。这是想法。

  1. 为 4 种不同的颜色编写 4 个类。
  2. 现在编写一个函数来为每个li项目添加正确的类。即，您可以检查 li 项目的位置并为其添加正确的类。

您可以使用 javascript 或 php 来执行此操作。现在链接颜色将随着新类别的添加而自动更改。

于 2012-05-08T14:51:40.587 回答