jQuery实现tab选项卡切换的小插件
最近在做项目的时候,需要一个tab选项卡功能,即通过切换tab显示该tab下的不同内容,知识点很简单,我在这里以插件的形式写出来,分享给大家,调用方法直接使用即可。
效果:
HTML代码
<div id="tab_demo" class="tab_demo">
<div class="tabBar clearfix"><span>选项卡一</span><span>选项卡二</span><span>自适应宽度</span></div>
<div class="tabCon">内容一</div>
<div class="tabCon">内容二</div>
<div class="tabCon">内容三</div>
</div>
CSS代码
.clearfix:after{content:"\20";display:block;height:0;clear:both;visibility:hidden} .clearfix{zoom:1} .tabBar {border-bottom: 2px solid #222} .tabBar span {background-color: #e8e8e8;cursor: pointer;display: inline-block;float: left;font-weight: bold;height: 30px;line-height: 30px;padding: 0 15px} .tabBar span.current{background-color: #222;color: #fff} .tabCon {display: none}
JS代码
引入jQuery
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
!function($) { $.fn.mytab = function(options){ var defaults = { tabBar:'.tabBar span', tabCon:".tabCon", className:"current", tabEvent:"click", index:0 } var options = $.extend(defaults, options); this.each(function(){ var that = $(this); that.find(options.tabBar).removeClass(options.className); that.find(options.tabBar).eq(options.index).addClass(options.className); that.find(options.tabCon).hide(); that.find(options.tabCon).eq(options.index).show(); that.find(options.tabBar).on(options.tabEvent,function(){ that.find(options.tabBar).removeClass(options.className); $(this).addClass(options.className); var index = that.find(options.tabBar).index(this); that.find(options.tabCon).hide(); that.find(options.tabCon).eq(index).show(); }); }); } } (window.jQuery);
调用代码
$("#tab_").mytab();
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » jQuery实现tab选项卡切换的小插件
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » jQuery实现tab选项卡切换的小插件