87,987
社区成员
发帖
与我相关
我的任务
分享点击li标签变色，求Js代码
鼠标经过和点击后的颜色是一样的。请教Js怎么写？
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>关于本站|联系我们</title>
<link href="Css/main.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="Images/b_i.ico" type="image/x-icon"/>
<link rel="bookmark" href="Images/b_i.ico" type="image/x-icon"/>
</head>
<body>
<div class="wrap">
<div class="main">
<div class="logo aLogo"><a class="logo_a" title="设为首页"></a></div>
<div class="bdn">当前位置：
<a href="./">首页</a> >> 关于本站
</div>
<div class="lmu">
<div class="idt">关于本站</div>
<div class="mu" id="mu">
<ul>
<li>关于本站</li>
<li>诚聘英才</li>
<li>联系我们</li>
<li>使用声明</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="JavaScript/footer.js"></script>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
张运领 2013-12-27
- 打赏
- 举报
5楼给的这个是对的。。。。
之前刚说了优先级的问题，自己又没有注意再次写的代码，还是有优先级的问题。。。。
我只能说自己，真二。。。
scscms太阳光 2013-12-27
- 打赏
- 举报
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>关于本站|联系我们</title>
<style type="text/css">
.mu .liSelected{background-color:#FFA11F;color:#0978D1}
.mu li{background-color:#0978D1;color:#FFF}
.mu li:hover{color:red}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<div class="logo aLogo"><a class="logo_a" title="设为首页"></a></div>
<div class="bdn">当前位置：
<a href="./">首页</a> >> 关于本站
</div>
<div class="lmu">
<div class="idt">关于本站</div>
<div class="mu" id="mu">
<ul>
<li>关于本站</li>
<li>诚聘英才</li>
<li>联系我们</li>
<li>使用声明</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var mu = document.getElementById("mu");
var li = mu.getElementsByTagName("li");
mu.onclick = function(e){
e = e || window.event;
var target = e.srcElement || e.target;
for(var i=0,len=li.length;i<len;i++){
li[i].className = target == li[i] ? "liSelected":"";
}
};
</script>
</div>
</body>
</html>
zhaofeng0420 2013-12-27
- 打赏
- 举报
现在比刚才好一点了，还有一点问题，就是点击前hover是OK的，点击后就失效了
张运领 2013-12-27
- 打赏
- 举报
<style>
.liSelected{
background-color:#FFA11F;
color:#0978D1;
}
.liNoSelected{
background-color:#0978D1;
color:#FFF;
}
.mu li:hover{
color:#0978D1;
}
</style>
<script>
document.getElementById("mu").onclick = function(e){
e = e || window.event;
var target = e.srcElement || e.target,
tagName = target.tagName.toLowerCase(),
allLi = document.getElementById("mu").getElementsByTagName("li");
for(var i=0,len=allLi.length;i<len;i++){
if(target == allLi[i]){
allLi[i].className = "liSelected";
}else{
allLi[i].className = "liNoSelected";
}
}
};
</script>zhaofeng0420 2013-12-27
- 打赏
- 举报
谢谢，您的这段代码很好用，但我改了一下之后，li:hover就失效了，不知道什么原因？
document.getElementById("mu").onclick = function(e){
e = e || window.event;
var target = e.srcElement || e.target,
tagName = target.tagName.toLowerCase(),
allLi = document.getElementById("mu").getElementsByTagName("li");
for(var i=0,len=allLi.length;i<len;i++){
if(target == allLi[i]){
allLi[i].style.background = "#FFA11F";
allLi[i].style.color = "#0978D1";
}else{
allLi[i].style.background = "#0978D1";
allLi[i].style.color = "#FFF";
}
}
};张运领 2013-12-27
- 打赏
- 举报
document.getElementById("mu").onclick = function(e){
e = e || window.event;
var target = e.srcElement || e.target,
tagName = target.tagName.toLowerCase(),
allLi = document.getElementById("mu").getElementsByTagName("li");
for(var i=0,len=allLi.length;i<len;i++){
if(target == allLi[i]){
allLi[i].style.background = "red";
}else{
allLi[i].style.background = "blue";
}
}
};
