作者：电脑信息网日期：
返回目录：设置问题
写了个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(){
e68a84e8a2ade799bee5baa6e997aee7ad94338$('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同颜色的边框就好了。
使用CSS实现鼠标点击元素后向该元素添加样式，首先需要理解这个点击事件，通过单独的css或者是zdhtml是无法实现的，一般都需要结合Js来做，专需要获取到这个元素，然后在通过js来改变元素的样式，在html中需要添加一个点击事件，也就是onclick，然后就是可以来实现，具体看下代码：
<html>
<head>
<style>
属 #round{
width:300px;
height:200px;
}
</style>
</head>
<script>
function iLeft(){
var oDiv = document.getElementById('round');
oDiv.style.left = 400+'px'; //通过js改变这个div的left值
}
</script>
<body>
<div id='round'>
<p><a href='' onclick="iLeft()" >我是测试文字</a></p>
</div>
</body>
</html>
用hover就可以了，百意思是当鼠标度经过时
举个例子，一个叫问top类的div：
.top:hover{ color:#F00; font-size:18px;}
意思是当鼠标经过时字体颜色答变为回红色，大小变为18像素，离开后答恢复原样。
1、需要设置a标签的伪类样式，具体操作方法首先打开百hbuilder软件，新建一个html文件，输入一个a标签，并且设置度a标签的class属性为alink：
2、然后在head标签中设置style标签，设置a标签的宽度和高度，在设置a标签的伪类visited、，active和link三个伪类的回样式，设置vistited访问过的的颜色为红色，active激活链接的样式也为红色，link链接的颜色为蓝色即可：
3、最后打开浏览器，可以看到设置好答的蓝色的a标签：
4、点击之后的颜色变成了红色：