我正在一个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种
- 不同的颜色编写4个类。
- 现在编写一个函数来为每个
li
项添加正确的类。可以检查 li 项目的位置并为其添加正确的类。
您可以使用javascript或php来执行此操作。现在,链接颜色将随着新类别的添加而自动更改。