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>