4.8地铁一阶段2
此处为前端代码部分：
前端的代码结构:
地铁图片是北京地铁网络图。
然后是js部分是需要从js网站中下载，就直接复制内容之后再目录下创建之后黏贴到目录中。下载网站：Download jQuery | jQuery，3.6.0的地址：https://code.jquery.com/jquery-3.6.0.min.js
以下是代码：index.html:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport"
content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<title>Test</title>
<script src = "js/jquery-3.6.0.js"></script>
<style>
/*兼容浏览器*/
* {
margin: 0;
padding: 0;
}
.content {
width: 100%;
height: 100%;
}
.content-left {
width: 19%;
height: 800px;
background-color: #1c232f;
float: left;
}
.content-right {
width: 81%;
height: 800px;
background-color: #6495ED;
float: left;
}
.left-title {
width: 100%;
height: 50px;
}
.left-title > a {
display: block;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
/*去掉a下默认下划线*/
text-decoration: none;
}
/*分割线*/
.seg {
height: 1px;
width: 100%;
background-color: black;
}
.nav {
/*上下5,左右0*/
margin: 5px 0;
}
/*菜单项主标题*/
.nav-title {
height: 40px;
width: 100%;
color: white;
text-align: center;
line-height: 40px;
cursor: pointer;
}
/*子标题内容区*/
.nav-content {
width: 100%;
height: 100%;
background-color: #0C1119;
}
/*子标题的样式*/
.nav-content > a {
display: block;
width: 100%;
height: 30px;
color: #CCCCCC;
text-decoration: none;
text-align: center;
line-height: 30px;
font-size: 13px;
}
/*子标题鼠标经过时的改变颜色*/
.nav-content > a:hover {
color: #FFFFFF;
background-color: #12040c;
}
/*内容区*/
.content-right{
font-size: 50px;
line-height: 600px;
text-align: center;
}
</style>
<script src = "https://code.jquery.com/jquery-3.2.1.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous"></script>
<script>
$(function () {
//隐藏所有子标题
$(".nav-menu").each(function () {
$(this).children(".nav-content").hide();
});
//给菜单项中的所有主标题绑定事件
$(".nav-title").each(function () {
//获取点击当前标签下所有子标签
var navConEle = $(this).parents(".nav-menu").children(".nav-content");
//绑定点击事件,判断navConEle的display这个属性是否为none,时none的话时隐藏状态
$(this).click(function(){
if (navConEle.css("display") !== "none") {
//隐藏,传参数自带动画,单位为毫秒
navConEle.hide(300);
} else {
//显示,传参数自带动画,单位为毫秒
$(".nav-menu").each(function () {
$(this).children(".nav-content").hide(300);
});
navConEle.show(300);
}
});
});
$(".nav-content>a").each(
function () {
$(this).click(
function () {
$(".content-right").html($((this).name).html());
});
}
);
});
</script>
</head>
<body>
<div class = "content">
<!--左侧导航栏-->
<div class = "content-left">
<div class = "left-title">
<a href = "right.html" target="right">北京地铁</a>
</div>
<!--水平线-->
<div class = "seg"></div>
<!--菜单栏导航-->
<div class = "nav">
<!--每一个菜单栏项-->
<div class = "nav-menu">
<!--主标题-->
<div class = "nav-title">地铁线路查询</div>
<!--子标题-->
<div class = "nav-content">
<a href = "chaxun2.html" target="right">查询站点</a>
<a href = "chaxun.html" target="right">查询线路</a>
</div>
</div>
<!--每一个菜单栏项-->
<div class = "nav-menu">
<!--主标题-->
<div class = "nav-title">换乘相关</div>
<!--子标题-->
<div class = "nav-content">
<a href="chaxun3.html" target="right" >查询起终点</a>
<a href = "changestop.html" target="right">查询换乘</a>
</div>
</div>
<!--每一个菜单栏项-->
<div class = "nav-menu">
<!--主标题-->
<div class = "nav-title">地图查看</div>
<!--子标题-->
<div class = "nav-content">
<a href = "map.html" target="right" >查看北京地铁地图</a>
</div>
</div>
</div>
<!--水平线-->
<div class = "seg"></div>
</div>
<!--右侧内容区-->
<div class = "content-right">
<iframe height="100%" name="right" src="right.html" width="100%" ></iframe>
</div>
</div>
</body>
</html>
changestop.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>换乘信息表</title>
</head>
<body>
<h1>换乘信息表</h1>
站名：复兴门 换乘：一号线-二号线<br>
站名：建国门 换乘：一号线-二号线<br>
站名：雍和宫 换乘：二号线-三号线<br>
站名：崇文门 换乘：二号线-三号线<br>
站名：磁器口 换乘：三号线-四号线<br>
站名：前门 换乘：二号线-五号线<br>
站名：鼓楼大街 换乘：二号线-五号线<br>
站名：军事博物馆 换乘：一号线-六号线<br>
<br>
</body>
</html>
chaxun.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>线路查询</title>
<script src = "js/jquery-3.6.0.js"></script>
<style >
a{
display: block;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
/*去掉a下默认下划线*/
text-decoration: none;
}
</style>
</head>
<body>
<div align = "center"> <a href="servlet?method=list1" > 一号线</a></div><br>
<div align = "center"> <a href="servlet?method=list2" > 二号线</a></div><br>
<div align = "center"> <a href="servlet?method=list3" > 三号线</a></div><br>
<div align = "center"> <a href="servlet?method=list4" > 四号线</a></div><br>
<div align = "center"> <a href="servlet?method=list5" > 五号线</a></div><br>
<div align = "center"> <a href="servlet?method=list6" > 六号线</a></div><br>
</body>
</html>
chaxun2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<head>
<title>站点查询</title>
</head>
<body>
<h1>站点查询</h1>
<form action="servlet?method=search" method="post">
请输入站点：<input type="text" size="15" name="s1" ><br>
<input type="submit" value="查询">
</form>
</body>
</html>
chaxun3.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>起点-终点查询</title>
</head>
<body>
<h1>起点-终点查询</h1>
<form action="servlet?" method="post">
请输入起点：<input type="text" size="15"><br>
请输入终点：<input type="text" size="15"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
list.jsp
<%-- Created by IntelliJ IDEA. User: vangogh Date: 2022/4/7 Time: 14:47 To change this template use File | Settings | File Templates. --%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <% Object message = request.getAttribute("message"); Object grade_list = request.getAttribute("grade_list"); if(message!=null && !"".equals(message)){ %> <script type="text/javascript"> alert("<%=request.getAttribute("message")%>"); </script> <%} %> <div align="center"> <h1 >线路信息</h1> <a href="index.html">返回主页</a> <table > <tr> <td>线路号</td> <td>线路名</td> <td>站号</td> <td>站名</td> </tr> <c:forEach items="${list}" var="item"> <tr> <td>${item.listid}</td> <td>${item.listname}</td> <td>${item.id}</td> <td>${item.zname}</td> </tr> </c:forEach> </table> </div> </body> </html>
list2.jsp
<%-- Created by IntelliJ IDEA. User: vangogh Date: 2022/4/7 Time: 16:32 To change this template use File | Settings | File Templates. --%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <% Object message = request.getAttribute("message"); Object grade_list = request.getAttribute("grade_list"); if(message!=null && !"".equals(message)){ %> <script type="text/javascript"> alert("<%=request.getAttribute("message")%>"); </script> <%} %> <div align="center"> <h1 >查询站点</h1> <a href="index.html">返回主页</a> <table > <tr> <td>线路名</td> </tr> <c:forEach items="${list}" var="item"> <tr> <td>${item.listname}</td> </tr> </c:forEach> </table> </div> </body> </html>
map.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>map</title>
<style type="text/css">
* {
margin: 0;
padding: 0
}
.form {
overflow: hidden;
position: relative;
}
.bgc {
width: 100%;
}
.back {
margin-left: 10px;
}
</style>
</head>
<body>
<div class="form">
<img src="地铁图.png" height="100%" width="100%">
</div>
</body>
</html>
right.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div align="center"><h1>欢迎使用北京地铁查询系统</h1></div>
</body>
</html>
浙公网安备 33010602011771号