效果：

<!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. confluent部署:

    confluent介绍https://www.cnblogs.com/dadadechengzi/p/9506964.html kafka connect:https://www.cnblogs.co ...

  2. 【转贴】优秀的龙芯Docker虚拟机解决方案

    优秀的龙芯Docker虚拟机解决方案 http://www.loongson.cn/m/view.php?aid=836 时间:2019-05-23 15:03  来源:未知   作者:龙芯中科    ...

  3. 制作U盘的win7系统安装

    方法一 用iso.需要下载个UltraISO软件安装. 制作64位WIN7系统U盘安装盘方法 首页就有iso下载,有雨林木风等,我下载了系统之家最新的1907 U盘安装win7系统BIOS设置 thi ...

  4. AppCan IDE中有时格式化代码后，代码就运行不了了。

    AppCan IDE中有时格式化代码后,代码就运行不了了.

  5. 修改公司VS_UCOS工程BUG调试过程说明

    说明:公司里的工程中,使用VS_UCOS来调试应用程序.业务逻辑.方法是嵌入式和VS分别建一个工程,把底层驱动部分分别添加各自需要的源文件,头文件使用同一个.也就是嵌入式的驱动函数名和参数和VS的函数 ...

  6. certutil 命令配合PS反弹后门

    Certutil.exe是一个命令行程序,作为证书服务的一部分安装.您可以使用Certutil.exe转储和显示证书颁发机构(CA)配置信息,配置证书服务,备份和还原CA组件以及验证证书,密钥对和证书 ...

  7. idea自定义注释

    类配置位置: 方法配置位置 配置内容 * * @Author *** * @Date $date$ $time$ $param$ * @return $return$ * @Description * ...

  8. 无法发布-旧项目发布时出现：该项目中不存在目标“GatherAllFilesToPublish”。

    在项目文件夹下面找到 xxxx.csproj 文件,使用 VisualStudio Code 打开(或者任意编辑器,VisualStudio 可能无法编辑) 将以下节点进行更改 <Import ...

  9. Git复习（八）之快速理解Git结构

      git pull:拉取远程服务器最新代码到本地(会自动merge) git add:将本地代码添加到暂存区 git commit:将暂存区的所有内容提交到当前分支(git会自动为我们创建第一个分支 ...

  10. JS基础_其他进制的数字（了解）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...