zoukankan      html  css  js  c++  java
  • 面向对象和面向过程的jquery版选项卡

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <title></title>
    </head>
    <style type="text/css">
    *{
    padding: 0;
    margin: 0;
    }
    .cart{
    margin: 0 auto;
    }
    ul li {
    list-style: none;
    float:left;
    }
    ul{
    30%;
    height: 60px;
    background-color: #000000;
    }
    ul li {
    text-decoration: none;
    line-height: 60px;
    cursor: pointer;
    color:#FFFFFF;
    }
    /*ul li:first-child{
    background-color: #ff0000;
    }*/
    .neirong{
    30%;
    height: 150px;
    background-color: #ccc;
    overflow: hidden;
    }
    p{
    display: none;
    }
    p:first-child{
    display: block;
    }
    </style>
    <body>
    <div class="cart1">
    <ul class="ulbox">
    <li>选项卡1</li>
    <li>选项卡2</li>
    <li>选项卡3</li>
    </ul>
    <div class="neirong">
    <p>一,就可以避免数据在浏览器和服务器间不必要地来回orage对象也是不同的cookies会发送到服务器端。不服来战</p>
    <p>二,其余两个不会。Microsoft指出InternetExplorer8增加cookie限制为每个域名50个,但IE7似乎也允许每个域名50个cookie。,,不服来战</p>
    <p>三,sessionStorage和localStorage是HTML5 Web Storage API提供的,可以方便的在web请求之间保存数据。有了本地数据,,不服来战</p>
    </div>
    </div>
    <div class="cart2">
    <ul class="ulbox">
    <li>选项卡1</li>
    <li>选项卡2</li>
    <li>选项卡3</li>
    </ul>
    <div class="neirong">
    <p>一,就可以避免数据在浏览器和服务器间不必要地来回orage对象也是不同的cookies会发送到服务器端。不服来战</p>
    <p>二,其余两个不会。Microsoft指出InternetExplorer8增加cookie限制为每个域名50个,但IE7似乎也允许每个域名50个cookie。,,不服来战</p>
    <p>三,sessionStorage和localStorage是HTML5 Web Storage API提供的,可以方便的在web请求之间保存数据。有了本地数据,,不服来战</p>
    </div>
    </div>
    <script type="text/javascript">
    //方法一
    // $(document).ready(function(){
    // $('.ulbox li').eq(0).css({"background":"#ff0000"});
    // $(".ulbox li").mouseenter(function(){
    // $(this).css({"backgroundColor":"#ff0000"}).siblings().css({"backgroundColor":"#000000"});
    // $("p").eq($(this).index()).show().siblings().hide();
    // });
    // });
    //方法二
    // $('li').eq(0).css({"background":"#ccc"});
    // $("li").mouseenter(function(){
    // $(this).css({"background":"#ccc"});
    // $("li").not($(this)).css({"background":"#000"})
    // idx=$(this).index();
    //
    // $("p").eq(idx).show();
    // $("p").not($("p").eq(idx)).hide();
    // })


    //方法三,以插件形式封装,可在同个页面中重复使用,实现封装性,有利于网站管理和维护
    (function($){
    $.fn.tabs=function(opt){
    var defaults={
    'autoclick':'mouseenter'
    }
    $.extend(defaults,opt);
    return this.each(function(){
    var me=$(this);
    var libox=me.find('.ulbox li');
    libox.eq(0).css({"background":"#ff0000"});
    libox.on(defaults.autoclick,show);
    function show(){
    var li=$(this);
    li.css({"backgroundColor":"#ff0000"}).siblings().css({"backgroundColor":"#000000"});
    me.find(".neirong p").eq($(this).index()).show().siblings().hide();
    }
    })
    }
    })(jQuery);

    $(function(){
    $('.cart1').tabs({
    'autoclick':'mouseover'
    });
    })
    $(function(){
    $('.cart2').tabs({
    'autoclick':'click'
    });
    })
    </script>
    </body>
    </html>

  • 相关阅读:
    pythonday06数据类型(四)
    pythonday05数据类型(三)
    pythonday04数据类型(二)
    pythonday03数据类型(一)
    Apollo自动驾驶实践——第0讲:导论
    图论学习:生成树的Matrix-tree定理
    2020杭电多校6 Expectation
    2020牛客暑期多校第九场 B Groundhog and Apple Tree
    图论:二分图最大权匹配KM算法
    第十章 百度Apollo实战
  • 原文地址:https://www.cnblogs.com/luoguixin/p/6225087.html
Copyright © 2011-2022 走看看