怎么做到点击链接后改变背景颜色
日期：2014-05-16 浏览次数：20328 次
如何做到点击链接后改变背景颜色
如图，我在网页上做了几个链接，怎么样做到当点击之后自动将这条背景颜色改变。如：点击test1，则test1背景改变，若点击test2，则test2背景改变，test1变回白色。
请各位大大帮帮忙看要如何解决，最好有完整点的代码，小弟刚开始做页面，还不太熟悉
------解决方案--------------------
------解决方案--------------------
如图，我在网页上做了几个链接，怎么样做到当点击之后自动将这条背景颜色改变。如：点击test1，则test1背景改变，若点击test2，则test2背景改变，test1变回白色。
请各位大大帮帮忙看要如何解决，最好有完整点的代码，小弟刚开始做页面，还不太熟悉
------解决方案--------------------
<ul id="ul">
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">test3</a></li>
<li><a href="#">test4</a></li>
<li><a href="#">test5</a></li>
</ul>
<style>
a.click{background:#ff0000;color:#ffffff;}
</style>
<script>
var co = false;
var as = document.getElementById('ul').getElementsByTagName('a');
for (var i = 0; i < as.length; i++) as[i].onclick = function () {
if (co != this) {
if (co) co.className = '';
co = this;
}
co.className = 'click';
return false
}
</script>
------解决方案--------------------
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>测试</title>
<style type="text/css">
.aa{
background-color: #fff;
}
.bb{
background-color: red;
}
</style>
</head>
<body>
<ul id="test_ul">
<li class="aa">
test1
</li>
<li class="aa">
test2
</li>
<li class="aa">
test3
</li>
<li class="aa">
test4
</li>
</ul>
<script type="text/javascript">
//该方法主要的思路是通过修改对应节点的样式修改背景颜色
function change_bg(){
var items=document.getElementById("test_ul").childNodes;//获取li节点
for(var i=0;i<items.length;i++){//循环每个li节点
if(items[i].nodeName=="LI"){//如果子节点是LI标签的话
items[i].onclick=function(){//绑定click事件
var all_li=this.parentNode.childNodes;//获取所有li节点
for(var j=0;j<all_li.length;j++){
all_li[j].className="aa";//将所有的li节点的背景还原
}
this.className="bb";//将当前的li节点的背景设为对应的背景
}
}
}
}
change_bg();
</script>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
