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

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>