zoukankan      html  css  js  c++  java
  • jQuery插件之选择卡切换效果

    写了一款jQuery插件,选择卡切换效果:

        /* 
            <div class="tab-container"> 
            <ul class="tab-title"> 
                <li class="current"></li> 
                <li></li> 
                <li></li> 
                <li></li> 
            </ul> 
            <div class="tab-content"></div> 
            <div class="tab-content"></div> 
            <div class="tab-content"></div> 
            <div class="tab-content"></div> 
            </div> 
        */  
          
        (function($){  
          
            $.fn.tab = function(options){  
                var ops = $.fn.extend({  
                    //当前样式  
                    currentClass : "current"  
                  
                },options);  
                return this.each(function(){  
                      
                    var $this = $(this);  
                    var $li = $this.find("ul > li");  
                    var $index = $this.index();  
                      
                    $li.click(function(){  
                        var _$this = $(this);  
                        var n =_$this.index();  
                        //移除样式  
                        $li.removeClass(ops.currentClass);  
                        //添加当前样式  
                        _$this.addClass(ops.currentClass);  
                        //隐藏所有  
                        $this.find(".tab-content").hide();    
                        //显示当前  
                        $this.find(".tab-content:eq("+n+")").show();      
                    });  
          
                });  
              
            }  
          
          
        })(jQuery);  
    
        .tab-container {}  
        .tab-container .current{}  
        .tab-container .tab-content{display:none}  
    
  • 相关阅读:
    个人作业——软件评测
    软件工程第五次作业——结对编程的实现
    软件工程第三次作业
    软件工程第一次作业
    两个矩形面积交
    二维并查集
    Java 作业 1
    练习题
    线性表

  • 原文地址:https://www.cnblogs.com/kingwell/p/2707170.html
Copyright © 2011-2022 走看看