选项卡效果
演示地址:http://www.corange.cn/demo/3766/index.html?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Demo</title>
<Style>
*{padding:0; margin:0}
body{font-size:12px; font-family:"微软雅黑","宋体"; color:#333;}
h1{font-size:16px; background:#ccc; padding:5px 10px; margin-bottom:15px}
.effect{ margin-bottom:15px; padding:0 10px}
.hide{display:none}
ul{list-style:none; overflow:hidden; height:1%; width:240px}
li{float:left; cursor:pointer; padding:5px 0; width:78px; border:1px solid #ccc; text-align:center}
li.current{ font-weight:bold; color:#000;}
#tab_content1 div,#tab_content2 div,#tab_content3 div,#tab_content4 div{ width:228px; height:150px; padding:10px 0 0 10px; border:1px solid #ccc;}
</style>
<script>
/*浏览器判断*/
var isIe = function(){return document.all?true:false;};
var isIe6 = function(){return isIe() && !window.XMLHttpRequest;}
var isIe7 = function(){return isIe() && /msie 7.0/gi.test(window.navigator.appVersion);};
var isIe8 = function(){return isIe() && /msie 8.0/gi.test(window.navigator.appVersion);};
var isFF = function(){return /firefox/gi.test(window.navigator.userAgent);};
var isOp = function(){return /opera/gi.test(window.navigator.userAgent);};
var isChrom = function(){return /Chrom/gi.test(window.navigator.userAgent);};
/**
* 通过HTML元素的id获取Dom对象组
* @param {String | Object} HTML标签的id或者Dom对象，参数可多个
* @return {Object | Array} HTMLElement对象 或 HTMLElement对象组
*/
var getId = function(){
var els = [];
for(var i = 0,leng = arguments.length; i < leng; i++){
var el = arguments[i];
if(typeof el == "string") el = document.getElementById(el);
if(leng == 1) return el;
els.push(el);?
}
return els;
};
/**
* 通过HTML元素的标签名获取Dom数组对象
* @param {String | Object} HTML标签的id或者Dom对象 --此项为可选
* @param {String} HTML标签名称 --此项为可选
* @return {Array} HTMLElement数组对象
*/
var getTagName = function(el, tagName){
return (getId(el) || document).getElementsByTagName(tagName || "*");
};
/**
* 继承对象（复制属性/方法）
* @param {Object} 被复制对象（子对象）
* @param {Object} 复制对象（父对象）
* @param {Boolean} 是否重写属性/方法
* @return {Object} 返回被复制对象（子对象）
*/
var extend = function(target, souce, rewrite){
for(var property in souce){
if(rewrite) target[property] = souce[property]; //重写并添加新的属性/方法
else if(!target[property]) target[property] = souce[property]; //只添加新的属性/方法
}
return target;
};
/**
* 设置监听器
* @param {Object} 监听对象
* @param {String} 监听类型
* @param {Function} 监听方法
*/
var addEvent = function(obj,type,func){
if(obj.addEventListener){
obj.addEventListener(type,func,false);
} else if(obj.attachEvent){
obj.attachEvent("on" + type,func);
} else {
obj["on" + type] = func;
}
}
/**
* 选择环境运行函数
* @param {Function} 执行函数
* @param {Object} 运行环境
* @return {Function} 返回一个已被绑定运行环境的函数
*/
var bind = function(func,environment){
var params = Array.prototype.slice.call(arguments,2);
return function(){
func.apply(environment,params);
}
}
/**
* @classDescription 选项卡构造函数
* @type {Object}
* @param {String | Object} TAB父层的id或者Dom对象?
* @param {String} 绑定鼠标行为的tab
* @param {String | Object} TAB CONTENT父层的id或者Dom对象?
* @param {String} 被切换的TAB CONTENT
* @param {Object} 参数集合（包括event,current,autoPlay,timeout）
*/?
function Tab(tabId, tabTag, contentId, contentTag, option){
var tabEl = getId(tabId),
tabChild = tabEl.children,
contentEl = getId(contentId),
contentChild = contentEl.children;
this.tabsFather = tabEl;
this.tabs = [];
this.contents = [];
this.currentIndex = 0;
this.timer = null;
for(var i = 0, l = tabChild.length; i < l; i++){
if(tabChild[i].tagName.toLowerCase() == tabTag)
this.tabs.push(tabChild[i]);
}
for(var i = 0, l = contentChild.length; i < l; i++){
if(contentChild[i].tagName.toLowerCase() == contentTag)
this.contents.push(contentChild[i]);
}
this.setOption(option);
this.run();
}
Tab.prototype.setOption = function(option){
this.option = {
event: "click", //绑定事件
current: "current", //切换的className
autoPlay: false, //是否自动切换选项卡
timeout: 1500 //切换时间
}
extend(this.option, option || {}, true);
}
Tab.prototype.run = function(){
for(var i = 0, l = this.tabs.length; i < l; i++){
addEvent(this.tabs[i], this.option.event, bind(function(tabs, contents, index, current, _this){?
var curIndex = _this.currentIndex;
tabs[curIndex].className = tabs[curIndex].className.replace(new RegExp("\\s*" + current,"g"), "");
tabs[index].className += " " + current;
contents[curIndex].className += " hide";
contents[index].className = contents[curIndex].className.replace(/\s*hide/g, "");
_this.currentIndex = index;
}, this.tabs[i], this.tabs, this.contents, i, this.option.current, this));
}
if(this.option.autoPlay){
this.auto();
addEvent(this.tabsFather, "mouseover", bind(function(){
clearInterval(this.timer);
}, this))
addEvent(this.tabsFather, "mouseout", bind(function(){
this.auto();
}, this))
}
}
Tab.prototype.auto = function(){
this.timer = setInterval(bind(function(){
this.next();
}, this), this.option.timeout)
}
Tab.prototype.next = function(){
var index = (this.currentIndex + 1) > (this.tabs.length - 1)?0:(this.currentIndex + 1);
if(isIe()){
this.tabs[index].fireEvent("on" + this.option.event);
} else {
var e = document.createEvent("MouseEvent");
e.initEvent(this.option.event,true,true);
this.tabs[index].dispatchEvent(e);
}?
}
Tab.prototype.prev = function(){
var index = (this.currentIndex - 1) >= 0?(this.currentIndex - 1):(this.tabs.length - 1);
if(isIe()){
this.tabs[index].fireEvent("on" + this.option.event);
} else {
var e = document.createEvent("MouseEvent");
e.initEvent(this.option.event,true,true);
this.tabs[index].dispatchEvent(e);
}?
}
</script>
</head>
<body>
<div class="BSHARE_COUNT bshare-share-count">0
原文地址:http://www.corange.cn/archives/2011/04/3766.html
