效果：

<!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. String和ByteBuffer互转

    String 转换 ByteBuffer: public static ByteBuffer getByteBuffer(String str) { return ByteBuffer.wrap(st ...

  2. （5.3）mysql高可用系列——mysql复制之复制的参数

    参考:https://www.iteye.com/blog/shift-alt-ctrl-2269539 详情 [1]参数 #[1.1]基本参数 bind-address=192.168.1.201 ...

  3. C++学习 之 继承（笔记）

    1.继承基础: 继承就像是生物里的遗传与变异,即派生类(子代)从基类(父代)那里继承基类的某些特性(遗传),并在此基础上拥有自己的特性(变异). C++派生语法: class Base//定义一个基类 ...

  4. Magento2入门之修改logo

    本文用于学习记录用 1.主题创建是在路径 /app/design/frontend/公司名/主题名称/ 我自己创建的路径为 app/design/frontend/Bman/castle,以下操作都在 ...

  5. Ubuntu中配置Python虚拟环境Virtualenv

    Ubuntu版本为18.04 Virtualenv介绍 在开发Python应用程序的时候,系统安装的Python3只有一个版本:3.4.所有第三方的包都会被pip安装到Python3的site-pac ...

  6. Docker 数据卷与容器互联

    Docker是基于Go语言实现的开源容器项目,Docker让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制, ...

  7. Alibaba开源组件-分布式流量控制框架sentinel初探

    Alibaba开源组件-分布式流量控制框架sentinel初探 2018年12月09日 18:23:11 SuperPurse 阅读数 1965更多 分类专栏: J2EE   版权声明:本文为博主原创 ...

  8. Dubbo架构

    原文链接http://dubbo.apache.org 架构图 节点角色说明 节点 角色说明 Provider 暴露服务的服务提供方 Consumer 调用远程服务的服务消费方 Registry 服务 ...

  9. macOS Sierra 如何安装任何来源的软件

    为了安全性考虑,macos是要手动勾选来自任何来源的选项才可以安装第三方应用软件,系统升级后,在新的系统中这一项是默认不显示的,如果想要出现和这一勾选选项,可以从终端中输入 sudo spctl -- ...

  10. 分布式的几件小事（九）zookeeper都有哪些使用场景

    1.zookeeper介绍 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提 ...