zoukankan      html  css  js  c++  java
  • JQ分页练习

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    .tab-panes ul{
    margin: 0;
    padding: 0;
    }
    .tab-panes ul li{
    list-style-type: none;
    display: inline-block;
    background: pink;
    padding: 3px 10px;
    border-radius:10px 10px 0 0 ;
    color: blueviolet;
    font-weight: 200;
    cursor: pointer;
    }
    .tab-panes ul li:hover{
    background-color: #5E5E5E;
    }
    .tab-panes ul li.active{
    background-color: #5E5E5E;
    }
    .tab-panes .panel{
    display: none;
    background: gray;
    padding: 30px;
    border-radius:0 0 10px 10px ;
    }
    .tab-panes .panel.active{
    display: block;
    }
    </style>
    </head>
    <body>
    <div class="tab-panes">
    <ul class="tabs">
    <li data-panelId="panel1" class="active">panel1</li>
    <li data-panelId="panel2">panel2</li>
    <li data-panelId="panel3">panel3</li>
    <li data-panelId="panel4">panel4</li>
    </ul>
    <div id="panel1" class="panel active">
    content1<br />
    content1<br />
    content1<br />
    content1<br />


    </div>
    <div id="panel2" class="panel">
    content2<br />
    content2<br />
    content2<br />
    content2<br />


    </div>
    <div id="panel3" class="panel">
    content3<br />
    content3<br />
    content3<br />
    content3<br />


    </div>
    <div id="panel4" class="panel">
    content4<br />
    content4<br />
    content4<br />
    content4<br />


    </div>
    </div>
    <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    $(function(){
    //为4个li添加点击事件
    $('.tab-panes .tabs li').on('click',function(){
    //解决按钮的活跃状态
    $('.tab-panes ul li.active').removeClass('active')
    //找到需要展示的div
    var show = $(this).attr('data-panelId')
    //隐藏当前的
    $('.tab-panes .panel.active').slideUp(300)
    //让新的展示出来
    $('#'+show).slideDown(300,function(){
    $(this).addClass('active');
    })
    //让当前按钮成为活跃状态
    $(this).addClass('active');
    })
    })
    </script>
    </body>
    </html>

  • 相关阅读:
    关于贝宝支付的一些信息和思路
    自动执行的脚本不错的思路
    关于微信公众平台生成带参数的二维码的场景值和系统对接的问题
    centos7.3查看时区
    关于where和having的直观理解
    关于微信支付的退款那些事
    关于微信支付的那些事
    正则替换
    java 正则表达式语法
    正则表达式
  • 原文地址:https://www.cnblogs.com/weixin2623670713/p/13046448.html
Copyright © 2011-2022 走看看