web前端开发技术博客
当前位置: 免费资源 > jQuery实现tab选项卡切换的小插件

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

2018-08-14 分类：免费资源 作者：码云 阅读（77）

最近在做项目的时候，需要一个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前端开发技术的博客，主要记录和总结前端工作中常用的知识及我的生活。
更多博客详情请看关于博客

圈子

关注微信公众号
关注微信公众号

最近更新

随机文章

热门标签

段子 数组 WordPress教程 WordPress建站 wordpress vue教程 vue SEO优化 meta jQuery插件 jquery Java教程 JavaScript input iframe html5 form表单 ES6 css教程 CSS3动画 css3 css canvas画布 ajax

精彩评论

服务热线：
 13888888888
微信扫一扫加好友

 QQ在线交流

点击这里给我发消息