li.jsp(需要提前导入jquery.min.js 地址：/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" "/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>
