动态菜单的交替颜色

Alternating Colours for dynamic menu

本文关键字：颜色 菜单 动态      更新时间：2023-09-26

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

谁能给我建议最简单的方法？

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

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

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

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

我会做这个服务器端。

在您需要填写的零件代码/零件注释中：

$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

我不给你代码。自己写。这是想法。

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

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

相关文章：