Csdn左边菜单栏的点击后链接背景色变化，怎么做的？

Question

本帖最后由 cundop 于 2010-09-11 17:30:23 编辑

Answer 1

这不是加一个背影颜色吗？bgcolor

Answer 2

#1是加一个背景色，点击后才加，点击哪个就跑到点击这里。你看下Csdn左边菜单栏就知道我的意思了

Answer 3

<style type="text/css">
li {
    background:blue;
}
</style>
<ul id="f">
<li onclick="changeClr(this);">aaaaa</li>
<li onclick="changeClr(this);">bbbbb</li>
<li onclick="changeClr(this);">ccccc</li>
<li onclick="changeClr(this);">vvvvv</li>
<li onclick="changeClr(this);">zzzzz</li>
<ul>
<script type="text/javascript">
    var f = document.getElementById("f");
    var cs = f.getElementsByTagName("li");
    var len=cs.length;
    function changeClr(obj){
        for(var i=0;i<len;i++){
            cs[i].style.background = "blue";
        }
        obj.style.background = "red";
    }
</script>

Answer 4

这个只要CSS设置好就可以了.如楼上说到的A:HOVER,另外还有A:LINK,A:VISITED都需要设置.3楼那个代码,性能很不好,但这种代码在网上还特别流行,包括有些大站都在用,实在是...
关于这个代码的问题以及更好的替代方法,可以看看这个文章
http://blog.csdn.net/theforever/archive/2010/08/23/5832244.aspx

Answer 5

如果要操作的项目,数量很少,两三个,倒也无妨.但如果象楼主所说,象CSDN菜单里那么多项的话,那个代码的性能就太垃圾了.

Answer 6

恩，谢谢指导，我知道css肯定比js性能好，但写出兼容的css对我来说很难，所以看到这个问题直接就这么写了，好像要兼容的话，必需最外层放个a标签？

Answer 7

<style type="text/css">
a {
 background:red;
}
a:active {
 background:blue;
}
</style><a href="javascript:void(0)"><div>aaa</div></a>
<a href="javascript:void(0)"><div>ccc</div></a>
<a href="javascript:void(0)"><div>ddd</div></a>
<a href="javascript:void(0)"><div>vvv</div></a>
试试这个吧，刚做的

Answer 8

简单的说就是，你点了javascript这个链接，点之前他的css状态a1,点之后是a2;你点了他用javascript把层叠样式改为了a2，然后把以前你点的那个链接的层叠样式恢复到a1。

Answer 9

theforever你好，刚才去看了你链接的文章，写的很好，
在我上个项目里，我也采用了你说的记住旧状态的做法，完成切换，可能是我的技术问题，最后放弃了，
因为在开发过程中这种只改变一个的状态使程序出现了bug，而且我也没查出什么原因，因为时间紧，最后改为for遍历，而且现在一直是遍历。
个人观点：效率有时候是和健壮性互补的。因为浏览器来不及处理频繁的操作，致使状态记录错误，而且这是无法纠正的。但每次遍历就没这样的问题了。小弟初入前端，望指教！