jquery點擊隱藏展現(hide,show)事件附錯誤解析

第一:絕對不要漏看.title div只有div才能觸發
第二:絕對不要忽視class="station"只有class纔會有hide和show

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>單個站點展示</title>
</head>
<body>
   <div class="title">
       <div id="stationitem"><a>站點基礎信息</a></div>
       <div id="stationitem"><a>站點監測</a></div>
       <div id="stationitem"><a>動力設備</a></div>
       <div id="stationitem"><a>巡檢工單</a></div>
       <div id="stationitem"><a>站點QQs</a></div>
       <div id="stationitem"><a>考勤記錄</a></div>
   </div>
  
   <div class="station">
       <div>村委會</div>
   </div>
   <div id="station" style="display:none;">
             <div id="surveytitle1">出水口水質</div>
               詳情溫度(℃)
   </div>  
   <div class="station" style="display:none;">動力設備
   </div>  
   <div class="station" style="display:none;">巡檢工單
   </div>  
   <div class="station" style="display:none;">站點QQs
   </div>
   <div class="station" style="display:none;">考勤記錄
   </div>
   
</body>
    
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
	var index; 
	$(function(e){ 
	    $(".title div").click(function(){
	        index=$(this).index();
	        console.log("index:"+index);
	        $(".station").each(function(i){
			     if(i==index){
				       $(this).show();
					    console.log("show:"+i);
				   }else{
				       $(this).hide();
					   console.log("hide:"+i);
				   }
		    })
	       
	    })
	})
	</script>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章