效果：

<!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 实现菜单控制对应视图的显示与隐藏的更多相关文章

  1. jQuery将物体居中，并且转换显示和隐藏

    今天来给大家贴一段代码,代码的作用就是利用jQuery将物体居中,并且转换显示和隐藏: 首先建立一个div标签并且写好css样式,具体如下 然后我想要的效果是当我点击了button这个按钮,test可 ...

  2. 利用来JS控制页面控件显示和隐藏有两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一:  1 2 document.getEle ...

  3. JS控制HTML元素的显示和隐藏

    JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...

  4. 使用JavaScript控制HTML元素的显示和隐藏

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...

  5. jquery怎么实现点击一个按钮控制一个div的显示和隐藏

    示例html 1 2 <div class="abc" style="display:none"></div> <input ty ...

  6. 控制HTML元素的显示与隐藏——display和visibility

    有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现.通过下面的例子了解display和visibility的区别,简单的例子代 ...

  7. iOS之 利用通知(NSNotificationCenter)获取键盘的高度,以及显示和隐藏键盘时修改界面的注意事项

    我们在开发中会遇到这样的情况:调用键盘时需要界面有一个调整,避免键盘遮掩输入框. 但实现时你会发现,在不同的手机上键盘的高度是不同的.这里列举一下: //获取键盘的高度 /* iphone 6: 中文 ...

  8. jquery总结06-动画事件01-基础显示和隐藏

    动画事件 .hide(option) 动画隐藏  会保存元素的原始属性值 $("#a2").hide({ duration: 3000, complete: function() ...

  9. jquery 点击按钮实现listbox的显示与隐藏，点击其他地方按钮外的地方，隐藏listbox

    本来不知道如何获取服务器的控件的,这下知道可以这么做了,所以记录下来.... <asp:ImageButton ID="alltime" ImageUrl="ima ...

随机推荐

  1. C++之用程序理解浅拷贝

    C++中的浅拷贝是产生很多问题的根本原因,其根本原因是在有指针的时候,只是拷贝了一个指针的值,多个指针指向同一块内存区域,当free内存时,造成其他指针指向的空间不存在.结合构造函数和析构函数理解浅拷 ...

  2. java文件操作解析

    转载:http://blog.csdn.net/cynhafa/article/details/6882061 字节流与和字符流的使用非常相似,两者除了操作代码上的不同之外,是否还有其他的不同呢? 实 ...

  3. HDU 1231 最大连续子序列 （动态规划）

    最大连续子序列 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  4. PostgreSQL的同步级别与MySQL的半同步after_sync比较

    MySQL的半同步中通过binlog进行流复制,同步级别和PostgreSQL对比可以发现: PostgreSQL                MySQL off local            ...

  5. Ajax异步上传在SSM框架中的应用

    最近在做毕业设计,由于毕设中要实现图片上传和视频上传的功能.突然发现原来的Form表单中的file已经满足不了我了,于是在一番折腾之后终于让我找到了一个简便的上传方式.下面来和大家分享一下我的过程. ...

  6. 【图论好题】ABC #142 Task F Pure

    题目大意 给定一个 $N$ 个点 $M$ 条边的有向图 $G$,无重边.自环.找出图 $G$ 的一个导出子图(induced subgraph) $G'$,且 $G'$ 中的每个点的入度和出度都是 1 ...

  7. JAVA基础--JAVA API集合框架(其他集合类，集合原理)

    一.ArrayList介绍 1.ArrayList介绍 ArrayList它是List接口的真正的实现类.也是我们开发中真正需要使用集合容器对象. ArrayList类,它是List接口的实现.肯定拥 ...

  8. powerdesiner概念模型转物理模型以及失败的解决方法

    powerdesiner概念模型转物理模型 概念模型转物理模型 关于powerdesinger 出现Entity Attribute code uniqueness解决办法 Entity Attrib ...

  9. JDK 监控和故障处理工具总结 (转)

    出处:  JDK 监控和故障处理工具总结 JDK 监控和故障处理工具总结 JDK 命令行工具 jps:查看所有 Java 进程 jstat: 监视虚拟机各种运行状态信息 jinfo: 实时地查看和调整 ...

  10. (转)Redis持久化的几种方式

    radis持久化的几种方式 1.前言 Redis是一种高级key-value数据库.它跟memcached类似,不过数据可以持久化,而且支持的数据类型很丰富.有字符串,链表,集 合和有序集合.支持在服 ...