文章目录[隐藏]
默认情况下 All 的背景颜色 background-color: #e35964,点击其它选择的时候移除上一个选项的背景颜色(首次是All),
给当前的选择添加一个背景颜色 background-color: #e35964
点击是触发 onclick=”getCategory()”
我需要给这些 div 添加一个id 传入 getCate·本2文来源gaodai$ma#com搞$代*码网2搞gaodaima代码gory()来改变当前选项的背景?
如果这样做的话 我不知道如何移除 上一个选项的样式
<div class="banner01"> <ul> <li> <div style="cursor:pointer;background-color: #e35964" class="d1">All</div> </li> <li style="margin-left:110px"> <div style="cursor:pointer;" class="d2" onclick="getCategory('',1)"></div> </li> <li> <div style="cursor:pointer" class="d2" onclick="getCategory('',1)"></div> </li> </ul> </div>
<script> function getCategory(category,page){ ................... //改变选项颜色 .................. }</script>
回复讨论(解决方案)
更新一下帖子
前面有做到类似的功能
我是用
把选择项包起来
在onclike function
重新读取选项的内容 把原div.html()内容替换掉,这样性能不好
在onclike function
重新读取选项的内容 把原div.html()内容替换掉,这样性能不好
用jq样式选择器方便点
用jq样式选择器方便点
但是我不知道如何去掉上一个的CSS
给你一个示例
<script src=scripts/jquery-1.8.3.min.js></script><script>$(function() { $('.d1,.d2').click(function() { $('.d1').addClass('d2').removeClass('d1'); $(this).attr('class', 'd1'); });});</script><style>li { float:left; }li div { width:200px }.d1 { background-color: #e35964 }.d2 { background-color: #ddd }</style><div class="banner01"> <ul> <li> <div style="cursor:pointer" class="d1">All</div> </li> <li> <div style="cursor:pointer" class="d2">aaa</div> </li> <li> <div style="cursor:pointer" class="d2">bbb</div> </li> </ul></div>
<style>
.show {cursor:pointer;background-color: #e35964;}
</style>
All
1
<script>
function getCategory(id)
{
$(“.d3”).each(function()
{
$(this).removeClass(“show”);
})
$(“#div”+id).addclass(“show”)
}
</script>