利用jquery 实现菜单控制对应视图的显示与隐藏
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="http://www.mamicode.com/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> <div> </div> <div> </div> <div> </div> <div> </div> </div> <div> <div> <div> </div> </div> <div> </div> <div> </div> <div> </div> </div> </body> </html>
View Code$(this).index() 表示同级中当前选取的元素的下标
$(".top1").addClass("topSelect"); 表示给某个标签添加一个类
$(this).siblings().removeClass("topSelect"); 使用siblings获取被操作元素之外的同级元素，然后使用remove()删除
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/41451.html
- 上一篇：归纳css（css3）中的选择器（超全）
- 下一篇：保存web.xml特别慢的问题
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")