标签：
源码 ：
var lcf_tab = function()
{
//保存用户输入的配置
this.config = null;
//上一个按钮
this.oldBnt = null;
//初始化
this.init = function(obj)
{
this.config = {};
for(var i in obj)
{
this.config[i] = obj[i];
}
this.bind();
}
//添加事件
this.bind = function()
{
var self = this;
//获取按钮列表
var bntArr = document.getElementById(this.config.parent).getElementsByTagName(this.config.action);
//给按钮加上号码
for(var i=0; i<bntArr.length; i++)
{
bntArr[i].setAttribute('lcf_number', (i+1));
}
//记录上一个按钮
this.oldBnt = bntArr[0];
//添加事件
for(var i=0; i<bntArr.length; i++)
{
var bnt = bntArr[i];
if (this.config.event == 'touchend' || this.config.event == 'touchstart')
{
bnt.addEventListener( this.config.event, function(){
self.dealEvebt(self, this);
}, false );
}
else
{
bnt[this.config.event] = function()
{
self.dealEvebt(self, this);
}
}
}
},
//处理事件
this.dealEvebt = function(self, tag)
{
//处理点中的按钮
var idx = self.getIdx(tag);
var msgArr = self.config['bnt'+idx].split(',');
self.removeClass(tag, msgArr[1]);
self.addClass(tag, msgArr[0]);
if (msgArr[2] != 'null')
{
self.getById(msgArr[2]).style.display = 'block';
}
//处理上一个按钮
var oldIdx = self.getIdx(self.oldBnt);
//点击的是同一个按钮则return
if (idx == oldIdx) {return;}
var oldMsgArr = self.config['bnt'+oldIdx].split(',');
self.removeClass(self.oldBnt, oldMsgArr[0]);
self.addClass(self.oldBnt, oldMsgArr[1]);
if (oldMsgArr[2] != 'null')
{
self.getById(oldMsgArr[2]).style.display = 'none';
}
self.oldBnt = tag;
},
//添加类名
this.addClass = function(obj, className)
{
var p = new RegExp(className);
//已经加过这个类名的则return
if ( p.test(obj.className) ) {return;}
obj.className = obj.className + ' ' + className;
},
//移除类名
this.removeClass = function(obj, className)
{
var length = className.length;
//要匹配的正则
var p = new RegExp(className);
//
var objClassName = obj.className;
//匹配到的话代表有这个字符
if (p.test(objClassName) )
{
//截取匹配到的字符
var str = className.substr( className.search(p), length+1 );
var px2 = new RegExp(str);
obj.className = obj.className.replace(px2,'');
}
//判断类名最后是否有一个空格存在
var lastP = /\s$/;
if( lastP.test(obj.className) )
{
obj.className = obj.className.substr(0, obj.className.length - 1);
}
},
//获取点中的按钮的位置是第几个
this.getIdx = function(obj)
{
return obj.getAttribute('lcf_number')
},
//id找节点
this.getById = function(id)
{
return document.getElementById(id);
}
};
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="gbk">
<meta name="robots" content="all">
<meta name="author" content="Tencent-CP">
<meta name="Copyright" content="Tencent">
<title>切换例子</title>
<style type="text/css">
body{margin:0px; padding:0px; font-size:60px; font-family: '微软雅黑';}
ul,ol,h1,h2,h3,h4,h5,h6,dl,dd,p,form{margin:0px; padding:0px;}
ul,ol{list-style-type:none;}
h1{display:none;}
#nav, #nav2{overflow: hidden;}
#nav li, #nav2 li{width: 333px; height: 77px; float: left; display: inline; text-align: center;}
#nav li a, #nav2 li a{text-indent: -9999px; overflow: hidden; display: block; width: 100%; height: 100%;}
#nav .select1, #nav2 .select1{ background: url('images/1.jpg') no-repeat 0 0; }
#nav .select2 , #nav2 .select2{ background: url('images/2.jpg') no-repeat 0 0; }
#nav .select3 , #nav2 .select3{ background: url('images/3.jpg') no-repeat 0 0; }
#nav .noselect1, #nav2 .noselect1{ background: url('images/4.jpg') no-repeat 0 0; }
#nav .noselect2, #nav2 .noselect2{ background: url('images/5.jpg') no-repeat 0 0; }
#nav .noselect3, #nav2 .noselect3{ background: url('images/6.jpg') no-repeat 0 0; }
.box{width: 1000px; height: 500px; background: red;}
.section{margin-top: 50px;}
</style>
</head>
<body>
<div class='header'>
<ul id='nav'>
<li class='select1'><a href="javascript:void(0)" title='审判记录'>审判记录</a></li>
<li class='noselect2'><a href="javascript:void(0)" title='视频审判'>视频审判</a></li>
<li class='noselect3'><a href="javascript:void(0)" title='积分兑换'>积分兑换</a></li>
</ul>
<div id='box1' class='box' style='display:block'>内容1</div>
<div id='box2' class='box' style='display:none'>内容2</div>
<div id='box3' class='box' style='display:none'>内容3</div>
</div>
<div class='section'>
<ul id='nav2'>
<li class='select1'><a href="javascript:void(0)" title='审判记录'>审判记录</a></li>
<li class='noselect2'><a href="javascript:void(0)" title='视频审判'>视频审判</a></li>
<li class='noselect3'><a href="javascript:void(0)" title='积分兑换'>积分兑换</a></li>
</ul>
<div id='box4' class='box' style='display:block'>内容1</div>
<div id='box5' class='box' style='display:none'>内容2</div>
<div id='box6' class='box' style='display:none'>内容3</div>
</div>
</body>
</html>
<script src='js/lcf_tab.js'></script>
<script type="text/javascript">
new lcf_tab().init({
'parent' : 'nav', //按钮的父节点
'action' : 'li', //按钮
'bnt1' : 'select1,noselect1,box1', //按钮选中的类名，按钮没选中的类名，按钮点击后显示的div，该div必须有一个唯一的id
'bnt2' : 'select2,noselect2,box2',
'bnt3' : 'select3,noselect3,box3',
'event' : 'onclick' //事件
});
new lcf_tab().init({
'parent' : 'nav2',
'action' : 'li',
'bnt1' : 'select1,noselect1,box4',
'bnt2' : 'select2,noselect2,box5',
'bnt3' : 'select3,noselect3,box6',
'event' : 'onmouseover'
});
</script>标签：
原文地址：http://blog.csdn.net/qq408896436/article/details/51351772
