利用jquery 实现菜单控制对应视图的显示与隐藏
效果:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="./js/jquery-1.12.4.min.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $(".top div").click(function(){ //var arr = $(".top div"); switch ($(this).index()) { case 0: console.log('0'); $(".top1").addClass("topSelect"); // 使用siblings获取被操作元素之外的同级元素,然后使用remove()删除 $(this).siblings().removeClass("topSelect"); $(".bottom1").removeClass("bottom-no-select").siblings().addClass('bottom-no-select'); break; case 1: console.log('1'); $(".top2").addClass("topSelect"); // 使用siblings获取被点击元素之外的同级元素,然后使用remove()删除 $(this).siblings().removeClass("topSelect"); $(".bottom2").removeClass("bottom-no-select").siblings().addClass('bottom-no-select'); break; case 2: console.log('2'); $(".top3").addClass("topSelect"); // 使用siblings获取被点击元素之外的同级元素,然后使用remove()删除 $(this).siblings().removeClass("topSelect"); $(".bottom3").removeClass("bottom-no-select").siblings().addClass('bottom-no-select'); break; case 3: console.log('3'); $(".top4").addClass("topSelect"); // 使用siblings获取被点击元素之外的同级元素,然后使用remove()删除 $(this).siblings().removeClass("topSelect"); $(".bottom4").removeClass("bottom-no-select").siblings().addClass('bottom-no-select'); break; default: } }); }); // $(function(){ // // }); </script> <style media="screen"> .top{ background-color: yellow; width: 100%; height: 100px; display: flex; flex-direction: row; } .top1{ background-color: orange; width: 100px; height: 100%; margin-left: 10px; } .top2{ background-color: orange; width: 100px; height: 100%; margin-left: 10px; } .top3{ background-color: orange; width: 100px; height: 100%; margin-left: 10px; } .top4{ background-color: orange; width: 100px; height: 100%; margin-left: 10px; } .bottom{ background-color: yellow; width: 100%; height: 200px; display: flex; flex-direction: row; } .bottom1{ background-color: gray; width: 100px; height: 100%; margin-left: 10px; } .bottom11{ background-color: blue; width: 100%; height: 100%; } .bottom2{ background-color: gray; width: 100px; height: 100%; margin-left: 10px; } .bottom3{ background-color: gray; width: 100px; height: 100%; margin-left: 10px; } .bottom4{ background-color: gray; width: 100px; height: 100%; margin-left: 10px; } .topSelect{ background-color: red; } .bottom-no-select{ /* display:none; */ /* background-color: rgba(255,255,255,0); */ opacity: 0; } </style> </head> <body> <div class="top"> <div class="top1 topSelect"> </div> <div class="top2"> </div> <div class="top3"> </div> <div class="top4"> </div> </div> <div class="bottom"> <div class="bottom1"> <div class="bottom11"> </div> </div> <div class="bottom2 bottom-no-select"> </div> <div class="bottom3 bottom-no-select"> </div> <div class="bottom4 bottom-no-select"> </div> </div> </body> </html>
$(this).index() 表示同级中当前选取的元素的下标
$(".top1").addClass("topSelect"); 表示给某个标签添加一个类
$(this).siblings().removeClass("topSelect"); 使用siblings获取被操作元素之外的同级元素,然后使用remove()删除
$(function(){ // code fill }); 等价 jQuery(function(){ // code fill }); 等价 $(document).ready(function () { // code fill });
此文仅为鄙人学习笔记之用,朋友你来了,如有不明白或者建议又或者想给我指点一二,请私信我。liuw_flexi@163.com/QQ群:582039935.
我的gitHub: (学习代码都在gitHub)
https://github.com/nwgdegitHub/