jQuery插件之--选择卡切换效果-技术博客集

jQuery插件之--选择卡切换效果
编程技术 / houtizong 发布于 3年前 92

写了一款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);

上一篇：HTML中label的两种使用方法

下一篇：用户体验-简单自然才是最好的

请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！

<p>写了一款jQuery插件，选择卡切换效果：</p>   <div class="cnblogs_Highlighter">    <pre class="brush:html;gutter:true;">    /*         &lt;div class=&quot;tab-container&quot;&gt;         &lt;ul class=&quot;tab-title&quot;&gt;             &lt;li class=&quot;current&quot;&gt;&lt;/li&gt;             &lt;li&gt;&lt;/li&gt;             &lt;li&gt;&lt;/li&gt;             &lt;li&gt;&lt;/li&gt;         &lt;/ul&gt;         &lt;div class=&quot;tab-content&quot;&gt;&lt;/div&gt;         &lt;div class=&quot;tab-content&quot;&gt;&lt;/div&gt;         &lt;div class=&quot;tab-content&quot;&gt;&lt;/div&gt;         &lt;div class=&quot;tab-content&quot;&gt;&lt;/div&gt;         &lt;/div&gt;     */            (function($){                $.fn.tab = function(options){              var ops = $.fn.extend({                  //当前样式                  currentClass : &quot;current&quot;                            },options);              return this.each(function(){                                    var $this = $(this);                  var $li = $this.find(&quot;ul &gt; li&quot;);                  var $index = $this.index();                                    $li.click(function(){                      var _$this = $(this);                      var n =_$this.index();                      //移除样式                      $li.removeClass(ops.currentClass);                      //添加当前样式                      _$this.addClass(ops.currentClass);                      //隐藏所有                      $this.find(&quot;.tab-content&quot;).hide();                        //显示当前                      $this.find(&quot;.tab-content:eq(&quot;+n+&quot;)&quot;).show();                      });                    });                    }                  })(jQuery);  </pre>   </div>

留言需要登陆哦

技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];

文章归档

文章标签

友情链接

首页
关于我们

Auther ·HouTiZong: 侯体宗的博客