Question

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

有人能给我最简单的方法吗？

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

Answer 1

<!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>

Answer 2

我对Opencart不熟悉，但用css不能实现吗？你最有可能使用第n个孩子来完成这个工作。或者您可以使用jquery，使用for循环和colour1，colour2等类名称对其进行着色。循环遍历颜色数和addClass（）到每个元素。可能有更好的解决方案，这些正是现在提出来的。

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

Answer 3

我会做这个服务器端。

在您需要填写的部分代码/部分评论中：

$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

Answer 4

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

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

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

动态菜单的交替颜色

4 个答案: