怎样用js改变点击菜单的样式
怎样用js控制当点击1时,1加上样式bor,其他的链接不加，当点击2时,2加上样式bor,其他的链接不加。或是实现这样的效果有什么好的办法！非常感谢！.bor{borde...
怎样用js控制当点击1时,1加上样式bor,其他的链接不加，当点击2时,2加上样式bor,其他的链接不加。或是实现这样的效果有什么好的办法！非常感谢！
.bor{border:solid 1px #c4dbde;}
<div class="leftmenu">
<ul><li class="select"><a href="#">1</a></li>
<li class="select"><a href="#">2</a></li>
<li class="select"><a href="#">3</a></li>
<li class="select"><a href="#">4</a></li>
<li class="select"><a href="#">5</a></li>
</ul>
</div> 展开
.bor{border:solid 1px #c4dbde;}
<div class="leftmenu">
<ul><li class="select"><a href="#">1</a></li>
<li class="select"><a href="#">2</a></li>
<li class="select"><a href="#">3</a></li>
<li class="select"><a href="#">4</a></li>
<li class="select"><a href="#">5</a></li>
</ul>
</div> 展开
3个回答
展开全部
// 当点击li菜单时
$("li").click(function(){
// 缓存当前点击的li对象
var $this = $(this);
// 获取当前对象是否包含执行的class样式
var thisCss = $this.hasClass("class名");
// 如果当前对象存在class样式（可以理解为当前为选中状态）
if(thisCss){
// 去掉当前样式（未选中）
$this.removeClass("class名");
}else{// 如果不存在某样式
// 添加样式
$this.addClass("class名");
}
})
$("li").click(function(){
// 缓存当前点击的li对象
var $this = $(this);
// 获取当前对象是否包含执行的class样式
var thisCss = $this.hasClass("class名");
// 如果当前对象存在class样式（可以理解为当前为选中状态）
if(thisCss){
// 去掉当前样式（未选中）
$this.removeClass("class名");
}else{// 如果不存在某样式
// 添加样式
$this.addClass("class名");
}
})
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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" />
<title>无标题文档</title>
<style type="text/css">
<!--
.aha {
background-color: #00FF66;
}
.bor{border:solid 1px #c4dbde;}
-->
</style>
<script language="javascript">
<!--
function do1(sth){
var it;
for(it=0;it<(sth.parentNode.parentNode.childNodes.length/2);it++){
sth.parentNode.parentNode.childNodes.item(2*it).childNodes.item(0).setAttribute("class","");
}
sth.setAttribute("class","bor");
}
-->
</script>
</head>
<body>
<div id="myd">
<ul><li class="select"><a href="#" onclick="do1(this)">1</a></li>
<li class="select"><a href="#" onclick="do1(this)">2</a></li>
<li class="select"><a href="#" onclick="do1(this)">3</a></li>
<li class="select"><a href="#" onclick="do1(this)">4</a></li>
<li class="select"><a href="#" onclick="do1(this)">5</a></li>
</ul>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.aha {
background-color: #00FF66;
}
.bor{border:solid 1px #c4dbde;}
-->
</style>
<script language="javascript">
<!--
function do1(sth){
var it;
for(it=0;it<(sth.parentNode.parentNode.childNodes.length/2);it++){
sth.parentNode.parentNode.childNodes.item(2*it).childNodes.item(0).setAttribute("class","");
}
sth.setAttribute("class","bor");
}
-->
</script>
</head>
<body>
<div id="myd">
<ul><li class="select"><a href="#" onclick="do1(this)">1</a></li>
<li class="select"><a href="#" onclick="do1(this)">2</a></li>
<li class="select"><a href="#" onclick="do1(this)">3</a></li>
<li class="select"><a href="#" onclick="do1(this)">4</a></li>
<li class="select"><a href="#" onclick="do1(this)">5</a></li>
</ul>
</div>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
你对这个回答的评价是？
展开全部
给每个li加上不同的id,然后id.className="bor"
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
