网页怎么实现鼠标单击后改变样式并且保留样式?
发布网友
发布时间:2022-04-26 08:34
我来回答
共1个回答
热心网友
时间:2022-06-25 21:22
写了个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;
varobj=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同颜色的边框就好了。