ul和li的导航栏

来源：互联网发布：排序算法python 编辑：程序博客网时间：2024/04/25 01:58
ul和li的导航栏
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>My JSP 'test3.jsp' starting page</title>    <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><script src="js/jquery-2.1.1.min.js"></script><style>li{list-style:none;color:blue;font-size:12px;margin-left:10px;}ul{color:#f1cd23;font-size:20px;margin:0px;padding:1px;}p{width:100px;height:25px;background-color:#37dddd;margin:0px;padding:0px;border-radius:5px;text-align:center;}</style>  </head>    <body>    <ul id="ul1">    <p>1111</p>    <li>张三</li><li>李四</li><li>王五</li>    </ul> <ul id="ul2"> <p>2222</p>    <li>张三</li><li>李四</li><li>王五</li>    </ul> <ul id="ul3"> <p>3333</p>    <li>张三</li><li>李四</li><li>王五</li>    </ul>  </body>  <script language="JavaScript">  $("p").mousemove(function(){$(this).parent("ul").find("*").show(500);var $p=$(this).parent("ul");var $x=$p.siblings();$x.find("li").hide(600);});$("p").mouseout(function(){$("ul").find("li").hide(600);});  </script></html>
0 0