您的位置：首页 > Web前端 > CSS

<li>的鼠标移入移出事件和点击事件分别实现为当前li添加样式，删除其他li样式

2017-08-14 16:31 1116 查看

li.jsp(需要提前导入jquery.min.js 地址：http://www.cnblogs.com/zhouerba/p/7358069.html )

鼠标移入：当前li变色，其他li恢复原来颜色

鼠标移出：先删除所有li的样式，再指定某一个li变色

点击事件：当前li变色，其他li恢复原来颜色

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style type="text/css">
ul li.active{
color:red;
}
ul li ul{
display: none;
}
ul li:hover ul {
display:block;
}
</style>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(function(){
$("li").click(function() {
$(this).siblings('li').removeClass('active');  // 删除其他兄弟元素的样式
$(this).addClass('active');                    // 添加当前元素的样式
});

$("li").mouseover(function() {
$(this).siblings('li').removeClass('active');  // 删除其他兄弟元素的样式
$(this).addClass('active');                   // 添加当前元素的样式
});

$("li").mouseout(function() {
$(this).removeClass('active');
//指定某一个li添加样式
$(this).parent().children().first().addClass('active');//第一个节点
//$(this).parent().children().first().next().addClass('active'); //第二个节点
//$(this).parent().children().last().addClass('active');//最后一个节点
//$(this).parent().children().last().prev().addClass('active');//倒数第二个
});

});
</script>
</head>
<body>
<div >
<ul >
<li  class="active" >111111111</li>
<li>22222222222
<ul>
<li >21</li>
<li>22</li>
<li>23</li>
</ul>
</li>
<li>33333333333</li>
<li>44444444444</li>
<li>55555555555</li>
</ul>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航