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,如何实现？自己找了一下，也测试过，都不能实现要求展开

 我来答

5个回答

#热议# 为什么说不要把裤子提到肚脐眼？

趣事情
推荐于2016-08-07 · 知道合伙人互联网行家

趣事情
知道合伙人互联网行家

采纳数：517 获赞数：5452

电脑技术，软件开发。移动开发。网站建设相关专业知识。都可以提供解答和相关技术指导。

向TA提问私信TA

关注

展开全部

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>

已赞过 已踩过<

评论收起

广州市魔书科技有限公司

广告2024-12-22

ppt生成、文本润色、翻译、文档阅读、写文案、写代码、写论文等API直连，集成12家知名企业大语言模型

chat.moshuai.co

百度网友fb4c2f3
2015-06-17 · TA获得超过435个赞

知道小有建树答主

回答量：193

采纳率：0%

帮助的人：175万

我也去答题访问个人页

关注

展开全部

其实我理解你大概的要求，我写了一个简单的效果如下，另外，看了这个问题的评论，点击链接后是会发生跳转的，这个效果还有必要么？

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>

已赞过 已踩过<

评论收起

郭某人来此
2015-10-01 · TA获得超过1645个赞

知道答主

回答量：952

采纳率：100%

帮助的人：90万

我也去答题访问个人页

关注

展开全部

其实我理解你大概的要求，我写了一个简单的效果如下，另外，看了这个问题的评论，点击链接后是会发生跳转的，这个效果还有必要么？

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>

已赞过 已踩过<

评论收起

匿名用户
2015-06-24

展开全部

var li = document.getElmtentByid("menu").getElementsByTagName("li");
li.onclick = function(){this.parent.chield.removeClass('cur');this.addClass('cur');}能理解不，就是this的爸爸的儿子移除class，也就是他兄弟移除class，然后this加上class，点哪加哪！

已赞过 已踩过<

评论收起

百度网友e2d7ae3
推荐于2016-03-16 · TA获得超过2207个赞

知道大有可为答主

回答量：1287

采纳率：0%

帮助的人：1612万

我也去答题访问个人页

关注

展开全部

(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）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

您可能关注的内容

javascript案例大全-4.0Turbo-国内入口

ppt生成、文本润色、翻译、文档阅读、写文案、写代码、写论文等API直连，集成12家知名企业大语言模型

chat.moshuai.co广告

js点击改变当前菜单css样式

您可能关注的内容

其他类似问题

为你推荐：