效果：

<!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. Java内存模型（二）volatile底层实现(CPU的缓存一致性协议MESI)

    CPU的缓存一致性协议MESI 在多核CPU中,内存中的数据会在多个核心中存在数据副本,某一个核心发生修改操作,就产生了数据不一致的问题,而一致性协议正是用于保证多个CPU cache之间缓存共享数据 ...

  2. SpreadJS 纯前端表格控件 V12.2 发布更新

    用不到100行代码,在前端实现Excel的全部功能 千万前端开发者翘首企盼,SpreadJS V12.2 终发布更新:六大功能特性,带来更多便利,用不到100行代码,在前端实现Excel的全部功能! ...

  3. redis缓存穿透00

    缓存穿透 缓存穿透,是指查询一个数据库一定不存在的数据.正常的使用缓存流程大致是,数据查询先进行缓存查询,如果key不存在或者key已经过期,再对数据库进行查询,并把查询到的对象,放进缓存.如果数据库 ...

  4. thinkPHP模型before_insert新增前 before_update更新前 before_write写入前 区别

    thinkPHP模型中有个save方法,可用于新增数据和修改数据,这里容易出现混淆. 经过调试: before_write,不管是插入新数据还是修改数据都会执行: before_insert,只有插入 ...

  5. jQuery导出word文档

    DDoc.js function DDoc() { this.data = []; this.relationData = []; this.listCount = 0; this.counter = ...

  6. 牛客 4C Alliances (dfs序)

    大意: 给定树, 有$k$个帮派, 第$i$个帮派所占据点为$c_i$, 以及$c_i$两两相连路径上的所有点. 一个点可能被多个帮派占领. $q$个询问, 第$i$个询问给定$t_i$个帮派, 给定 ...

  7. luogu P3226 [HNOI2012]集合选数

    luogu 因为限制关系只和2和3有关,如果把数中2的因子和3的因子都除掉,那剩下的数不同的数是不会相互影响,所以每次考虑剩下的数一样的一类数,答案为每类数答案的乘积 如果选了一个数,那么2的因子多1 ...

  8. 分布式的几件小事（五）dubbo的spi思想是什么

    1.什么是SPI机制 SPI 全称为 Service Provider Interface,是一种服务发现机制. SPI 的本质是将接口实现类的全限定名配置在文件中,并由服务加载器读取配置文件,加载实 ...

  9. 01 初识HTML

    HTML是什么? 超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言. 本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们 ...

  10. Django框架——基础之模型系统（ORM相关操作）

    ------------恢复内容开始------------ 1.必定会的十三条! 1.1记忆方法一:(按字母顺序记忆)   <1> all(): 查询所有结果 <2> cou ...