zoukankan html css js c++ java

利用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;
         100%;
        height: 100px;
        display: flex;
        flex-direction: row;
      }
      .top1{
        background-color: orange;
         100px;
        height: 100%;
        margin-left: 10px;
      }
      .top2{
        background-color: orange;
         100px;
        height: 100%;
        margin-left: 10px;
      }
      .top3{
        background-color: orange;
         100px;
        height: 100%;
        margin-left: 10px;
      }
      .top4{
        background-color: orange;
         100px;
        height: 100%;
        margin-left: 10px;
      }

      .bottom{
        background-color: yellow;
         100%;
        height: 200px;
        display: flex;
        flex-direction: row;
      }

      .bottom1{
        background-color: gray;
         100px;
        height: 100%;
        margin-left: 10px;
      }

      .bottom11{
        background-color: blue;
         100%;
        height: 100%;
      }

      .bottom2{
        background-color: gray;
         100px;
        height: 100%;
        margin-left: 10px;
      }
      .bottom3{
        background-color: gray;
         100px;
        height: 100%;
        margin-left: 10px;
      }
      .bottom4{
        background-color: gray;
         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>

View Code

$(this).index() 表示同级中当前选取的元素的下标

$(".top1").addClass("topSelect"); 表示给某个标签添加一个类

$(this).siblings().removeClass("topSelect"); 使用siblings获取被操作元素之外的同级元素，然后使用remove()删除

$(function(){
   // code fill
});
等价

jQuery(function(){ 
   // code fill
});
等价

$(document).ready(function () {
    // code fill
});

此文仅为鄙人学习笔记之用，朋友你来了，如有不明白或者建议又或者想给我指点一二，请私信我。liuw_flexi@163.com/QQ群:582039935. 我的gitHub: (学习代码都在gitHub) https://github.com/nwgdegitHub/

查看全文

相关阅读:
php DOC类型注释的用法
 Mysql 数据库更新错误
 Smarty初体验二获取配置信息
 Smarty 模板初体验
 去网络视频广告方法——虽过时，但效果依然很好（亲测）
织梦模板修改方法大全
 dede织梦：文章内容页调用
 织梦系统学习：文章页当前位置的写法（自认对SEO有用）
ZOJ 3229 Shoot the Bullet
URAL 1277 Cops and Thieves

原文地址：https://www.cnblogs.com/liuw-flexi/p/11994475.html