码云笔记前端博客
Home > 免费资源 > jQuery实现tab选项卡切换的小插件

jQuery实现tab选项卡切换的小插件

2018-08-14 分类:免费资源 作者:码云 阅读(344)

本文共计1495个字,阅读时间预计4分钟,干货满满,记得点赞加收藏哦

最近在做项目的时候,需要一个tab选项卡功能,即通过切换tab显示该tab下的不同内容,知识点很简单,我在这里以插件的形式写出来,分享给大家,调用方法直接使用即可。

效果:

jQuery实现tab选项卡切换的小插件

HTML代码


1
2
3
4
5
6
<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代码

1
2
3
4
5
.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

1
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
!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);

调用代码

1
$("#tab_").mytab();

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(2) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
2

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - jQuery实现tab选项卡切换的小插件

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 471 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 228 条
  • 链接总数: 15 个
  • 标签总数: 1033 个
  • 建站时间: 522 天
  • 访问总量: 8680907 次
  • 最近更新: 2019年11月15日