js点击改变当前菜单css样式
<divid="menu"><ul><li><ahref="../Student"><span></span>首页</a></li></ul><ul><li><ahref...
<div id="menu">
<ul>
<li><a href="../Student" ><span> </span>首页</a></li>
</ul>
<ul>
<li><a href="1.asp?Type=1" target="get" div="mainRight"><span> </span>第一项</a></li>
<li><a href="1.asp?Type=2" target="get" div="mainRight"><span> </span>第二项</a></li>
<li><a href="1.asp?Type=3" target="get" div="mainRight"><span> </span>第三项</a></li>
</ul>
<ul>
<li><a href="2.asp" target="get" div="mainRight"><span> </span>第四项</a></li>
<li><a href="3.asp" target="get" div="mainRight"><span> </span>第五项</a></li>
</ul>
</div>
当点击第一项时，给这个LI加个class="cur"，点击其它菜单时，第一项菜单的class="cur"消失，给点击的添加class,如何实现？自己找了一下，也测试过，都不能实现要求 展开
<ul>
<li><a href="../Student" ><span> </span>首页</a></li>
</ul>
<ul>
<li><a href="1.asp?Type=1" target="get" div="mainRight"><span> </span>第一项</a></li>
<li><a href="1.asp?Type=2" target="get" div="mainRight"><span> </span>第二项</a></li>
<li><a href="1.asp?Type=3" target="get" div="mainRight"><span> </span>第三项</a></li>
</ul>
<ul>
<li><a href="2.asp" target="get" div="mainRight"><span> </span>第四项</a></li>
<li><a href="3.asp" target="get" div="mainRight"><span> </span>第五项</a></li>
</ul>
</div>
当点击第一项时，给这个LI加个class="cur"，点击其它菜单时，第一项菜单的class="cur"消失，给点击的添加class,如何实现？自己找了一下，也测试过，都不能实现要求 展开
5个回答
展开全部
js可实现用户对页面中的选择条件改变页面中的样式，页面样式可以通过style修饰，也可以通过css修饰，改变css样式，代码如下：
[html] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Change1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/Change.css">
<script language="javascript">
function test4(event) {
//获取样式表中所有class选择器都获得
var ocssRules = document.styleSheets[0].rules;
//从ocssRules中取出你希望的class
var style1 = ocssRules[0];
if(event.value == "黑色") {
//window.alert(style1.style.backgroundColor);
style1.style.backgroundColor="black";
}else if(event.value == "红色") {
style1.style.backgroundColor="red";
}
}
</script>
</head>
<body>
<div id="div1" class="style1">div1</div>
<input type="button" value="黑色" onclick="test4(this)"/>
<input type="button" value="红色" onclick="test4(this)"/>
</body>
</html>
[html] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Change1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/Change.css">
<script language="javascript">
function test4(event) {
//获取样式表中所有class选择器都获得
var ocssRules = document.styleSheets[0].rules;
//从ocssRules中取出你希望的class
var style1 = ocssRules[0];
if(event.value == "黑色") {
//window.alert(style1.style.backgroundColor);
style1.style.backgroundColor="black";
}else if(event.value == "红色") {
style1.style.backgroundColor="red";
}
}
</script>
</head>
<body>
<div id="div1" class="style1">div1</div>
<input type="button" value="黑色" onclick="test4(this)"/>
<input type="button" value="红色" onclick="test4(this)"/>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
其实我理解你大概的要求，我写了一个简单的效果如下，另外，看了这个问题的评论，点击链接后是会发生跳转的，这个效果还有必要么？
HTML：
<html>
<head>
<script type="text/javascript" src="../jquery-1.9.1.min.js"></script>
<title>无标题文档</title>
<style type="text/css">
a{ color:#000;}
.box{
width:500px;
margin:20px auto;
}
.box ul{ list-style: none; }
.box ul li{
width:200px;
height: 50px;
text-align: center;
line-height: 50px;
border:1px solid #ccc;
}
.cur{ background-color:#000; color:#fff;}
.cur a{color:#fff;}
</style>
</head>
<body>
<!-- 这里放的是示例代码 -->
<div class='box'>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
$(function(){
$('div.box ul li').click(function(){
$(this).addClass('cur').siblings().removeClass('cur');
});
})
</script>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
其实我理解你大概的要求，我写了一个简单的效果如下，另外，看了这个问题的评论，点击链接后是会发生跳转的，这个效果还有必要么？
HTML：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<html>
<head>
<script type="text/javascript" src="../jquery-1.9.1.min.js"></script>
<title>无标题文档</title>
<style type="text/css">
a{ color:#000;}
.box{
width:500px;
margin:20px auto;
}
.box ul{ list-style: none; }
.box ul li{
width:200px;
height: 50px;
text-align: center;
line-height: 50px;
border:1px solid #ccc;
}
.cur{ background-color:#000; color:#fff;}
.cur a{color:#fff;}
</style>
</head>
<body>
<!-- 这里放的是示例代码 -->
<div class='box'>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
$(function(){
$('div.box ul li').click(function(){
$(this).addClass('cur').siblings().removeClass('cur');
});
})
</script>
</html>
HTML：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<html>
<head>
<script type="text/javascript" src="../jquery-1.9.1.min.js"></script>
<title>无标题文档</title>
<style type="text/css">
a{ color:#000;}
.box{
width:500px;
margin:20px auto;
}
.box ul{ list-style: none; }
.box ul li{
width:200px;
height: 50px;
text-align: center;
line-height: 50px;
border:1px solid #ccc;
}
.cur{ background-color:#000; color:#fff;}
.cur a{color:#fff;}
</style>
</head>
<body>
<!-- 这里放的是示例代码 -->
<div class='box'>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
$(function(){
$('div.box ul li').click(function(){
$(this).addClass('cur').siblings().removeClass('cur');
});
})
</script>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
var li = document.getElmtentByid("menu").getElementsByTagName("li");
li.onclick = function(){this.parent.chield.removeClass('cur');this.addClass('cur');}能理解不，就是this的爸爸的儿子移除class，也就是他兄弟移除class，然后this加上class，点哪加哪！
li.onclick = function(){this.parent.chield.removeClass('cur');this.addClass('cur');}能理解不，就是this的爸爸的儿子移除class，也就是他兄弟移除class，然后this加上class，点哪加哪！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
(function($){
$(function(){
$("#menu a").each(function(){
$(this).click(function(){
$("#menu li:eq(1) a").removeClass("cur");
});
});
$("#menu li:eq(1) a").click(function(){$(this).addClass("cur")})
});
})(jQuery);
更多追问追答
追问
怎么使用？直接加在菜单项前面？好像不行，没有反应
追答
<!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" />
<title>无标题文档</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
(function($){
$(function(){
$("#menu a").each(function(){
$(this).click(function(){
$("#menu li:eq(1) a").removeClass("cur");
});
});
$("#menu li:eq(1) a").click(function(){$(this).addClass("cur")})
});
})(jQuery);
</script>
</head>
<body>
你的代码
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
