jQuery_Javascript_css菜单选择对应模块显示隐藏

最新推荐文章于 2023-11-02 09:05:23 发布

Datrilla

最新推荐文章于 2023-11-02 09:05:23 发布

阅读量2.5k

点赞数

本文链接：https://blog.csdn.net/u014646950/article/details/51804652

版权

javascript 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

jQuery

1 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

这个是在原来的基础上增加了一个显示页面。实现点击菜单选择对应模块的显示隐藏。很劣质就是拉。

把代码复制到w3的测试地方就可以快速查看实现的模式。

查看器地址：http://www.w3school.com.cn/tiy/t.asp?f=csse_selector_attribute_att

对应原来工程部分：http://blog.csdn.net/u014646950/article/details/50464980

<%@ 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>