<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <link rel="stylesheet" href="tab.css"> <style> *{margin: 0;padding: 0;} ul li{list-style: none;} </style> </head> <body> <div class="tab js-tab" data-config='{ "triggerType":"click", "effect":"fade", "invoke":2, "auto":2000 }'> <ul class="tab-nav"> <li class="active"><a href="javascript:void(0)">新闻</a></li> <li><a href="javascript:void(0)">娱乐</a></li> <li><a href="javascript:void(0)">电影</a></li> <li><a href="javascript:void(0)">科技</a></li> </ul> <div class="content"> <div class="content-item current" style="background: red">新闻</div> <div class="content-item" style="background: green">娱乐</div> <div class="content-item" style="background: yellow">电影</div> <div class="content-item" style="background: black">科技</div> </div> </div> <script src="jquery.min.js"></script> <script src="tab.js"></script> <script> $(function(){ var tab = new Tab($('.js-tab').eq(0)); }) </script> </body> </html>
.tab{width: 600px; background: #323232; padding: 20px;} .tab-nav{height: 30px;} .tab-nav li{float: left;margin-right: 5px;background: #767676;border-radius: 3px 3px 0 0;} .tab-nav li.active{background: #fff} .tab-nav li.active a{color: #777;} .tab-nav li a{display: block;height: 30px; line-height: 30px; color: #fff; padding: 0 20px; text-decoration: none;} .content{width: 600px; height: 300px;background: #fff;} .content-item{position: absolute; width: 600px; height: 300px; display: none;} .content div{font-size: 40px; text-align: center; line-height: 300px;} .content div.current{display: block;}
;(function($){ var Tab = function(tab){ var _this = this; this.tab = tab; //默认配置参数 this.config = { "triggerType":"click",//定义鼠标的触发类型 "effect":"fade",//定义切换效果的类型 "invoke":2,//默认显示选项 "auto":false//自动切换的时间 } // 如果有配置参数，就扩展默认的配置参数 if(this.getConfig()){ $.extend(this.config,this.getConfig()) } //保存tab列表中的li和content-item this.tabItems = this.tab.find('ul.tab-nav li'); this.contentItems = this.tab.find('div.content div.content-item'); //保存配置参数 var config = this.config;
// 刷新保持选项状态
var hash = location.hash;//根据hash的改变控制tab刷新时的状态
if(hash){
this.invoke(this.tabItems.eq(hash.match(/d+/)[0]))
}
// 触发点击事件
if(config.triggerType === 'click'){ this.tabItems.bind(config.triggerType,function(){ _this.invoke($(this)); }) }else if(config.triggerType === 'mouseover'){ this.tabItems.bind(config.triggerType,function(){ _this.invoke($(this)); }) } //自动切换功能 if(config.auto){ //全局定时器 this.timer = null; // 计数器 this.loop = 0; this.autoPlay(); this.tab.hover(function(){ window.clearInterval(_this.timer);//移入停止自动切换 },function(){ _this.autoPlay();//移出轮播 }) } if(config.invoke > 1){ this.invoke(this.tabItems.eq(config.invoke - 1)) } }; Tab.prototype = { //获取配置参数 getConfig:function(){ var config = this.tab.attr('data-config'); if(config&&config != ''){ return JSON.parse(config) }else{ //没有默认的配置参数就使用默认的参数 return null } }, // 事件驱动函数 invoke:function(currentTab){ var _this = this; var index = currentTab.index(); var effect = this.config.effect; var contentItem = this.contentItems; /*** *执行Tab选中的状态 *切换对应的tab内容 */ //tab状态 currentTab.addClass('active').siblings().removeClass('active'); //切换对应的内容区域 if(effect === 'default' || effect != 'fade'){ contentItem.eq(index).addClass('current').siblings().removeClass('current'); }else if(effect === 'fade'){ contentItem.eq(index).fadeIn().siblings().fadeOut(); } // index 和 loop 同步 if(this.config.auto){ this.loop = index; } }, //自动切换 autoPlay:function(){ var _this = this, tabItems = this.tabItems, tabLength = tabItems.size(), config = this.config; this.timer = window.setInterval(function(){ _this.loop++; if(_this.loop >= tabLength){ _this.loop = 0; } tabItems.eq(_this.loop).trigger(config.triggerType); }, config.auto); } }; window.Tab = Tab; })(jQuery);//自执行的匿名函数
实现效果：手动切换（点击切换、鼠标滑过切换），自动切换，默认选项切换，刷新保持选项状态
效果图：
