2023.3.21每日总结-526互联

<%@ 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>
<title>站点查询</title>
<style type="text/css">
.tabDiv{margin:100px 100px;float:left;}
.tabDiv2{margin:250px 100px;float:left;margin-left:200px;}

.tabs1{margin:10px 50px}
.tabs2{margin:100px 50px}
.tabs3{margin:100px 50px}

.Butn1{width:200px;height:72px;margin:100px 50px;font-size: 16px;}
.Butn2{width:200px;height:72px;margin:100px 50px;font-size: 16px;}
.Butn3{width:200px;height:72px;margin:100px 50px;font-size: 16px;}

.Butn{width:200px;height:72px;font-size: 30px;display: inline-block;color: blue;}
a{font-size:50px;text-decoration: none;}

</style>

<body>
<div class="tabDiv">
<div>
<div class="Butn1"><button class="Butn" id="button1">换乘查询</button></div>
<div class="Butn2"><button class="Butn" id="button2">线路查询</button></div>
<div class="Butn3"><button class="Butn" id="button3">站点查询</button></div>
</div>
</div>
<div class="tabDiv2">

<div class="tabs1" id="content1" style="display: block">

<form action="newhuanchengim.jsp" method="get">
<h1>换乘线路查询</h1>
<p>1.输入需要查询出发地</p>
<input type="text" style="width: 180px;height:20px;border-radius:10px" name="chufadi" /><br>
<p>2.输入需要查询目的地</p>
<input type="text" style="width: 180px;height:20px;border-radius:10px" name="mudidi" /><br>
<input style="width:200px;height:50px;font-size: 30px;display: inline-block;color: blue;" type="submit" value="查询    " /><br>
</form>

</div>
<div class="tabs2" id="content2" style="display: none">

<form action="newxianluim.jsp" method="get">
<h1>线路站点查询</h1>
<p>1.需要查询线路名称</p>
<select style="height:30px;border:1px solid gray;font-size:25px;" name="xianlu" id="xianlu">
<option value="北京地铁1号线">北京地铁1号线</option>
<option value="北京地铁2号线">北京地铁2号线</option>
<option value="北京地铁4号线">北京地铁4号线</option>
<option value="北京地铁5号线">北京地铁5号线</option>
<option value="北京地铁6号线">北京地铁6号线</option>
<option value="北京地铁7号线">北京地铁7号线</option>
<option value="北京地铁8号线">北京地铁8号线</option>
<option value="北京地铁9号线">北京地铁9号线</option>
<option value="北京地铁10号线">北京地铁10号线</option>
<option value="北京地铁11号线">北京地铁11号线</option>
<option value="北京地铁13号线">北京地铁13号线</option>
<option value="北京地铁14号线">北京地铁14号线</option>
<option value="北京地铁15号线">北京地铁15号线</option>
<option value="北京地铁16号线">北京地铁16号线</option>
<option value="北京地铁17号线">北京地铁17号线</option>
<option value="北京地铁19号线">北京地铁19号线</option>
</select><br>
<input style="width:200px;height:50px;font-size: 30px;display: inline-block;color: blue;" type="submit" value="查询    " /><br>
</form>


</div>
<div class="tabs3" id="content3" style="display: none">

<h1>站点查询</h1>
<p>1.输入需要查询站点名称</p>
<form action="newzhandainim.jsp" method="get">
<input type="text" style="width: 180px;height:20px;border-radius:10px" name="zhandian" /><br>
<input style="width:200px;height:50px;font-size: 30px;display: inline-block;color: blue;" type="submit" value="查询    " /><br>
</form>
</div>

<script type="text/jscript">    
document.getElementById("button1").addEventListener("click", function() {  document.getElementById("content1").style.display = "block";  document.getElementById("content2").style.display = "none";  document.getElementById("content3").style.display = "none";});
document.getElementById("button2").addEventListener("click", function() {  document.getElementById("content1").style.display = "none";  document.getElementById("content2").style.display = "block";  document.getElementById("content3").style.display = "none";});
document.getElementById("button3").addEventListener("click", function() {  document.getElementById("content1").style.display = "none";  document.getElementById("content2").style.display = "none";  document.getElementById("content3").style.display = "block";});
</script>
</div>

</body>
</html>