这个是在原来的基础上增加了一个显示页面。实现点击菜单选择对应模块的显示隐藏。很劣质就是拉。
把代码复制到w3的测试地方就可以快速查看实现的模式。
对应原来工程部
<%@ 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">
.divBG
{
background:#fff;
}
.miceAbave:hover
{
cursor:pointer;
background:#eee;
}
.liheigth
{
Height:40px;
width: 180px;
margin-left:10px;
}
.fixmargin
{
height:600px;
width:auto;
}
.hidentable
{
display:none;
}
.tagone
{
border:1px;
margin-left:6px;
background:#E0FFFF;
}
.tagone:hover
{
background:#00FF7F;
}
.pull-right
{
float: right;
}
.pull-left
{
float:left;
} table{padding:0.5em;
color:blue;
margin-left:190px;
border-left:1px solid gray;
}
</style>
</head>
<body>
<div><!--左边菜单栏-->
<div id="choicea" class="divBG pull-left">
<ul >
<li value="1" class=" miceAbave liheigth">
<a >科目一</a></li>
<li value="2" class=" miceAbave liheigth">
<a >科目二</a></li>
<li value="3" class=" miceAbave liheigth">
<a >科目三</a></li>
<li value="4"class=" miceAbave liheigth">
<a >科目四</a></li>
</ul>
</div>
<div id="caidan" class=" fixmargin">
<div id="1" class="fixmargin panel panel-default">
<div class="panel-heading"> 科目一</div>
<div class="panel-body" >
</div>
<table class="table table-bordered ">
<tr><td colspan="2"> <p>今天去参加科一考试，人很多，好紧张，想着要一次过，觉得真很麻烦。在四楼候考，然后再跟着到五楼，排在中间一条，并不是排前面的就第一个上。中间谁先考完了，监考官会说来一个，走快的先到先得，然后就很后面才上去考。
摄像头感觉整个脑袋都照到了就没有再调整了。输身份证、录指纹（很担心录不上去），点击开始考试按钮。布局和我平时训练不一样</p></td></tr>
</table>
</div>
<div id="2" class="fixmargin panel panel-default hidentable">
<div class="panel-heading"> </div>
<div class="panel-body" >
</div>
<table class="table table-bordered ">
<tr><td colspan="2"> 520去考的科二，可以说考前接近一个星期整个人状态都很不好。简单说就是担心挂。大概吃完晚饭后一个小时左右就在床上躺着。然后考前的那个凌晨，醒了，但是担心考的时候会困，就一直闭着眼睛。六点起床，快七点等驾校的车，
8点左右到达黄山，大概9点左右去候考室那边等，10点去按指纹后等待。叫到了才去道上找车。 按照教练说的，<strong>先看看转速不为0，接着确认是自己的信息</strong>。下来的那个跟我说离合很好。安心许多。接着被管理催着先往前开。座位来不及调，
就<strong>先安全带</strong>了。然后到定点停坡前排队。我的那辆，竟然突然门提示没有关好，幸好没有进入考试区域，我就开了猛关了。
然后趁着排队调好座位。<strong>后视镜</strong>调了好久还是没法调好。我就稍微移动脑袋看是否ok。就将就了
</td></tr>
</table>
</div>
<div id="3" class="fixmargin panel panel-default hidentable">
<div class="panel-heading">福州黄山考试场一</div>
<div class="panel-body" >
</div>
<table class="table table-bordered ">
<tr><td> 眼镜，身份证，钱，手机关机，纸巾，平底鞋，预约凭证，反光衣服，垫子</td></tr>
<tr><td colspan="2"> <p>
安全带 手刹 座位 后视镜 档位 门关好 大灯打开 近光灯模式 车是否启动 是否为个人信息
<br/><strong>起步</strong>左闪灯，一档，松手刹，动着三五秒关灯。
<br/><strong>泊位停车</strong>右转灯，黄线前停，空档，松离合，右灯是否要补，半联动进入，停，空档手刹，松离合，灯回正。出，左灯，一档，松手刹，车动三五秒关灯。
<br/><strong>变更车道</strong>左入灯，右灯出。
对准箭头,加油，二档，加油，三档<strong>直线行驶</strong>
<br/><strong>学校区域</strong>第二个棱形闪灯一组.
<br/><strong>通过十字路口</strong>左灯，一档，红绿灯，过。一直靠左边行驶。
<br/><strong>环岛过后</strong>看情况是否可以提档，提到三或四档。
<br/><strong>吊头</strong>打左灯，可以提前打，停，观察，左满舵拐，看情况是否可以提档到四档，红绿灯，变道左道，后拐弯前减档到二档，一档慢慢上坡也行，弯道处没被霸占能容两辆车。
<br/>接着<strong>变道右道</strong>快到红绿灯处右转向灯，<strong>右拐回去</strong>提档三档，
<br/><strong>学校区域</strong>第二个棱形闪灯一组，后提档四档，
<br/><strong>会车</strong>需要四档，
<br/><strong>超车</strong>四档保持，报超车左转向灯，压黄线闪灯一组，左转正后右转向灯，右转顺便灯回正，出。
</p></td></tr>
<tr><td> 离开离合60秒 开灯 关灯
如果期间有打灯失误发现了及时恢复有补救可能哦。虽然各个项目看视频间隔好像很少，但是停停走走还是有许多思考时间的。平时场内我直线加完档总压不到黄块。那边距离稍远。一般路跑提档后能在路中间对直对正就能压黄了。考试大路上变道要注意，有时候变一半社会车比较老练的就从后面上来了，有时候后视镜看到推土车类的。不能马上变道就保持直线行。拐弯要特别小心非机动车后视镜看不到，但可能已经在车的侧面靠前，瞟车门可能就看到了
</td></tr>
</table>
</div> <div id="4" class="fixmargin panel panel-default hidentable">
<div class="panel-heading">福州黄山考试场一</div>
<div class="panel-body" >
</div>
<table class="table table-bordered ">
<tr><td>
</td></tr>
</table>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script >
<!--
$(document).ready(function(){
$("li").click(function (){
var cho= $(this).val();
// alert(cho);
$("div#"+cho).show();
for(var i=1;i<5;i++)
{ if(cho!=i)
$("div#"+i).hide();
}
});
});
-->
</script>
</body>
</html>
