网页怎么实现鼠标单击后改变样式并且保留样式?
我对javascript不熟，请问下怎么实现图片中个效果？因为javascript看懂都难，每个属性方法都要百度，实在吃力。先贴上HTML<divclass="sideb...
我对javascript不熟，请问下怎么实现图片中个效果？
因为javascript看懂都难，每个属性方法都要百度，实在吃力。先贴上HTML
<div class="sidebar">
<ul>
<li><a href="#" id="she">系统桌面</a></li>
<li><a href="#" id="she">导航设计</a></li>
<li><a href="#" id="she">风格美化</a></li>
<li><a href="#" id="she">版式布局</a></li>
<li><a href="#" id="she">配置方案</a></li>
</ul>
</div>
<script type="text/javascript">
var ce=document.getElementById("she");
ce.onclick=function(){
this.parentNode.style.backgroundColor="#FFFFFF";
this.parentNode.style.border="1px solid #B4B4B4";
return false;
}
</script>
我自己山寨成了这样
一开始想法是只要 ul 里面的 li 的样式改成右边无边框，可能就能实现了。
于是我尝试这样： this.parentNode.style.border-top="1px solid #B4B4B4";
好吧我太天真了。。
这javascript代码我看得不太懂，但是有问题我还是知道的，运行的结果是只有点击第一个 li 的时候才会发
生样式改变，再点其他的就没效果了。
我想要的是被单击的 li 就发生像图中一样的样式改变，如果单击了其他的 li ，则被单击的 li 发生样式改变，上一个被单击的 li 恢复原有样式。
只剩20分，拜托各位大神帮忙。 展开
因为javascript看懂都难，每个属性方法都要百度，实在吃力。先贴上HTML
<div class="sidebar">
<ul>
<li><a href="#" id="she">系统桌面</a></li>
<li><a href="#" id="she">导航设计</a></li>
<li><a href="#" id="she">风格美化</a></li>
<li><a href="#" id="she">版式布局</a></li>
<li><a href="#" id="she">配置方案</a></li>
</ul>
</div>
<script type="text/javascript">
var ce=document.getElementById("she");
ce.onclick=function(){
this.parentNode.style.backgroundColor="#FFFFFF";
this.parentNode.style.border="1px solid #B4B4B4";
return false;
}
</script>
我自己山寨成了这样
一开始想法是只要 ul 里面的 li 的样式改成右边无边框，可能就能实现了。
于是我尝试这样： this.parentNode.style.border-top="1px solid #B4B4B4";
好吧我太天真了。。
这javascript代码我看得不太懂，但是有问题我还是知道的，运行的结果是只有点击第一个 li 的时候才会发
生样式改变，再点其他的就没效果了。
我想要的是被单击的 li 就发生像图中一样的样式改变，如果单击了其他的 li ，则被单击的 li 发生样式改变，上一个被单击的 li 恢复原有样式。
只剩20分，拜托各位大神帮忙。 展开
展开全部
写了个Demo，样式有可能有出入，但是这个问题不大是不；
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 实现这样的效果主要是要定位 向右侧便宜一下就可以了 */
.sidebar { position: relative; width: 200px; height: 500px; background: #DDD; border: 1px solid #F00; }
.sidebar > ul { position: relative; padding: 0; margin: 0; width: 160px; margin-top: 30px; float: right; right: -1px; }
.sidebar li { text-align: center; list-style: none; padding: 0; margin: 0; font: 12px/3 "Microsoft YaHei",SimHei; }
.sidebar li>a { text-decoration: none; color: #333; }
.sidebar .hover { border: 1px solid #B4B4B4; border-right: none; background: #EEE; }
</style>
<!-- 引入jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
/*
// jQuery方式开始
$(function(){
$('div.sidebar li').click(function(){
$(this).addClass('hover').siblings('li').removeClass('hover');
})
})
// jQuery方式结束
*/
// 原生Javascript
window.onload=function(){
var obj=document.getElementById('nav');
var lis=obj.getElementsByTagName('li');
obj.onclick=function(event){
var e=event||window.event;
var obj=e.srcElement?e.srcElement:e.target;
// 去掉其他LI的hover样式
for(var i=0, l=lis.length; i < l; i++){
lis[i].className="";
}
switch(obj.tagName){
case 'LI':
obj.className="hover";
break;
case 'A':
obj.parentNode.className="hover";
break;
}
}
}
</script>
</head>
<body>
<div class="sidebar">
<ul id="nav">
<li class="hover" ><a href="#">系统桌面</a></li>
<li><a href="#">导航设计</a></li>
<li><a href="#">风格美化</a></li>
<li><a href="#">版式布局</a></li>
<li><a href="#">配置方案</a></li>
</ul>
</div>
</body>
</html>
你这个问题主要有二，
第一，HTML页面元素的ID是唯一的，你这个重名了，所以只有第一个好使；
第二，那个用定位，之后想列表元素向右偏移一像素就达到类似的效果了，现在这个还有点小遗憾就是会看起来哆嗦一下，把li的默认情况下加个跟外层.sidebar同颜色的边框就好了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
