利用jquery 实现菜单控制对应视图的显示与隐藏
Posted liuw_flexi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用jquery 实现菜单控制对应视图的显示与隐藏相关的知识，希望对你有一定的参考价值。
效果：
<!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
});
以上是关于利用jquery 实现菜单控制对应视图的显示与隐藏的主要内容，如果未能解决你的问题，请参考以下文章
利用JavaScript+DIV+CSS实现下拉菜单。当鼠标移动到菜单选项的时候显示对应的DIV：function show(menu)。当鼠标移出的时候隐藏所有的DIV：function hide(