码云笔记前端博客
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前端开发技术的博客，主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享，分享各种科普知识和实用优秀的代码，以及分享些热门的互联网资讯和福利！码云笔记有你更精彩！
更多博客详情请看关于博客

【新用户限量秒杀】热门云产品限量秒杀，云服务器1核1G 首年99元

最新文章

热门文章

热门标签

after ajax axure教程 before canvas canvas画布 css css3 CSS3动画 css3特效 CSS技巧 css教程 ES6 form表单 html5 iframe input JavaScript Java教程 jquery jQuery插件 JS算法 meta React Sass函数 select SEO SEO优化 svg table TypeScript vue vue教程 webpack webpack打包 wordpress WordPress主题 WordPress建站 WordPress插件 WordPress教程 wp教程 前端面试题 导航菜单 插件 数组 段子 浏览器 滚动条 盒模型 闭包

精彩评论

站点统计

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