zoukankan      html  css  js  c++  java
  • 动画效果 详情请看 jQuery api 动画收放 slideUp slideDown 通过id class 来设置 jQuery实现效果

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    *{
    margin: 0;
    padding: 0;
    }
    #boss{
    margin:auto ;
    500px;
    background-color:#C48698;
    border: 2px;
    }
    #boss ul li {
    list-style: none;
    }
    #boss ul li div {
    display: none;
    height: 500px;
    /**/
    }
    p{
    margin-top: 2px;
    500px;
    height:50px;
    background-color:#f9f9f9;
    border:2px #4eac30;
    }
    </style>
    <script src="jquery-3.2.0.min.js"></script>
    </head>
    <body>
    <div id="boss" >
    <ul id="ul">
    <li>
    <p class="p1"> </p>
    <div id="div1" class="sjb"></div>
    </li>
    <li>
    <p class="p2"> </p>
    <div id="div2" class="sjb"></div>
    </li>
    <li>
    <p class="p3"> </p>
    <div id="div3" class="sjb"></div>
    </li>
    </ul>
    </div>
    <script>
    $('.p1').click(function(){
    $('.sjb').slideUp();
    $("#div1").slideDown();
    $("#div1").css({
    backgroundColor:'#79ADA5'
    });
    });
    $('.p2').click(function(){
    $('.sjb').slideUp();
    $("#div2").slideDown();
    $("#div2").css({
    backgroundColor:'#2C677E'
    });
    });

    $('.p3').click(function(){
    $('.sjb').slideUp();
    $("#div3").slideDown();
    $("#div3").css({
    background:'#29315D'
    });
    });

    </script>
    </body>
    </html>
  • 相关阅读:
    DBAccess
    业务耗时及数组
    QB资料学习.01
    格式化参数
    日志记录.02_线程处理
    nginx 开启gzip
    js 变量提升和函数提升
    js 深拷贝 vs 浅拷贝
    js 伪数组 转 数组
    js 对象原型和原型链
  • 原文地址:https://www.cnblogs.com/zyhh/p/7121889.html
Copyright © 2011-2022 走看看