<%--
Created by IntelliJ IDEA.
User: 张小白
Date: 2020/12/30
Time: 16:56
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
<title>导航测试</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<style>
div{
border:1px solid black;
}
li {
list-style: none;
}
#two ul{
display: none;
}
#three>li>ul,#three>li>ul>li>ul{
display: none;
}
</style>
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/jquery-1.12.4.js"></script>
</head>
<body>
<div style="width: 200px; height: 500px; display: inline-block;float: left;" >
<%--二级菜单--%>
<ul id="two">
<li><b>欢迎页面</b></li>
<li>
<b>挂号管理</b>
<ul>
<li><a href="guahao1">挂号1</a></li>
<li><a href="guahao2">挂号2</a></li>
<li><a href="guahao3">挂号3</a></li>
<li><a href="guahao4">挂号4</a></li>
</ul>
</li>
<li>
<b>门诊管理</b>
<ul>
<li><a href="menzhen1">门诊1</a></li>
<li><a href="menzhen2">门诊2</a></li>
<li><a href="menzhen3">门诊3</a></li>
<li><a href="menzhen4">门诊4</a></li>
</ul>
</li>
<li>
<b>科室管理</b>
<ul>
<li><a href="keshi1">科室1</a></li>
<li><a href="keshi2">科室2</a></li>
<li><a href="keshi3">科室3</a></li>
<li><a href="keshi4">科室4</a></li>
</ul>
</li>
</ul>
<%--三级菜单--%>
<ul id="three">
<li>
<b>省份</b>
<ul>
<li>
<b>山西省</b>
<ul>
<li><a href="lf?args=山西太原">太原市</a></li>
<li><a href="yc?args=山西运城">运城市</a></li>
<li><a href="hm?args=山西侯马">侯马市</a></li>
</ul>
</li>
<li>
<b>广东省</b>
<ul>
<li><a href="th?args=广州天河">天河区</a></li>
<li><a href="hd?args=广州花都">花都区</a></li>
<li><a href="by?args=广州白云">白云区</a></li>
</ul>
</li>
<li>
<b>江苏省</b>
<ul>
<li><a href="sz?args=江苏苏州">苏州市</a></li>
<li><a href="qz?args=江苏衢州">衢州市</a></li>
<li><a href="nt?args=江苏南通">南通市</a></li>
</ul>
</li>
</ul>
</li>
<li>
<b>空调</b>
<ul>
<li>
<b>美的</b>
<ul>
<li><a href="mdj?args=美的家用">美的家用</a></li>
<li><a href="mdg?args=美的公用">美的公调</a></li>
</ul>
</li>
<li>
<b>格力</b>
<ul>
<li><a href="glj?args=格力家用">格力家用</a></li>
<li><a href="glg?args=格力公用">格力公用</a></li>
</ul>
</li>
</ul>
</li>
<li>
<b>药品</b>
<ul>
<li>
<b>内科</b>
<ul>
<li><a href="pyp?args=999皮炎平">999皮炎平</a></li>
<li><a href="gml?args=999感冒灵">999感冒灵</a></li>
</ul>
</li>
<li>
<b>外科</b>
<ul>
<li><a href="hhy?args=红花油">红花油</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div style="width: 500px; height: 500px;display: inline-block;">
<p style="text-align: center; line-height: 500px; font-size: 50px;">${a}</p>
</div>
</body>
<script type="text/javascript" >
let href = window.location.href; //获取当前页面的URL
href = href.substring(href.lastIndexOf("/")+1); //url截取
href = decodeURI(href); // //url解码(预防中文乱码)
/*二级菜单*/
$("#two>li").click(function () {
$(this).css("color","red").children("ul").show(150);
$(this).siblings().children().css("color","black");
$(this).siblings().css("color","black").children("ul").hide(150);
})
$("#two>li>ul>li a").each(function () {
let args =$(this);
let url = args.attr("href");
if(url==href){
args.css("color","orange");
args.parent().parent().show(150);
args.parent().parent().prev().css("color","red");
return;
}
})
/*三级菜单*/
$("#three>li>ul>li>ul>li a").each(function () {
let args =$(this);
let url = args.attr("href");
if(href==url){
args.css("color","red");
args.parent().parent().show(150);
args.parent().parent().prev().css("color","red");
args.parent().parent().parent().parent().show(150);
args.parent().parent().parent().parent().prev().css("color","red");
return;
}
})
$("#three>li,#three>li>ul>li").click(function(){
$(this).children("b").css("color","red");
$(this).children("ul").show();
$(this).siblings().children("b").css("color","black");
$(this).siblings().children("ul").hide();
})
</script>
</html>
3549
评论 1
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
