<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>经典选项卡切换javascript</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<style type="text/css">
body{
font: 14px/36px "微软雅黑";
/* text-align: center; */
}
#banner{
width: 600px;
padding: 10px;
border: 1px solid #ccc;
margin:20px auto;
overflow: hidden;
}
.tab{
overflow: hidden;
}
.tab li{
float: left;
width: 100px;
text-align: center;
cursor: pointer;
background-color: #ccc;
}
.tab li.on{
background-color: red;
color: #fff;
}
.tabcont{
display: none;
}
.tabcont.on{
display: block;
}
.tabcont li{
overflow: hidden;
}
.tabcont img{
width: 450px;
height: auto;
float: left;
}
.tabcont .left{
float: left;
}
.tabcont .left li{
display: none;
}
.tabcont .left li.on{
display: block;
}
.tabcont .right{
float: right;
width: 150px;
text-indent: 20px;
}
.tabcont .right li{
cursor: pointer;
}
.tabcont .right .on{
background-color: #666;
color: #fff;
}
</style>
</head>
<body>
<div id="banner">
<ul class="tab" id="tab">
<li class="on">时尚女装</li>
<li>精品潮装</li>
</ul>
<div class="tabcont on">
<ul class="left">
<li class="one on"><a href="#"></a></li>
<li class="one "><a href="#"></a></li>
<li class="one "><a href="#"></a></li>
</ul>
<ul class="right" id="one">
<li class="on">欧美羽绒</li>
<li>休闲衬衫</li>
<li>全新女装</li>
</ul>
</div>
<div class="tabcont">
<ul class="left">
<li class="one on"><a href="#"></a></li>
<li class="one"><a href="#"></a></li>
<li class="one"><a href="#"></a></li>
</ul>
<ul class="right" id="two">
<li class="on">超累男装</li>
<li>精品潮装</li>
<li>凡行动派</li>
</ul>
</div>
</div>
<script type="text/javascript">
var tab = {
mc : [],// 对象数组
init : function (id,classname,addclass,mouse,isTime,time){
// 为数组添加对象 对象的名字就是id
this.mc[id] = {
"id":id,// 选项卡ID 其中的子元素必须是li
"classname":classname,//切换内容的 class 必须与 id 在同一个父集中
"addClass":addclass, // 切换是添加的class
"mouse":mouse,// 切换事件
'index':0,// 默认位置
"isTime":isTime,// 该对象是否开启 定时器
"time":time,// 定时器间隔
};
this.show(this.mc[id]);
},
// 绑定事件
show : function (obj){
var that = this;
var idEle = document.getElementById(obj.id);
var idlis = idEle.getElementsByTagName("li");
for( var i = 0 ; i < idlis.length ; i ++ ){
idlis[i].index = i;
// 传的参数是 click mousemove 这样的参数，所以要 on 拼接
idlis[i]["on"+obj.mouse] = function (){
obj.index = this.index;
that.tabon(obj)
}
}
// 清除定时器
idEle.parentNode.onmouseover = function (){
clearInterval(obj.timer);
}
idEle.parentNode.onmouseout = function (){
that.createTime(obj)
}
if (obj.isTime==true) {
this.createTime(obj);
}
},
// 选项卡切换
tabon : function (obj){
var idEle = document.getElementById(obj.id);
var idlis = idEle.getElementsByTagName("li");
for( var j = 0 ; j < idlis.length ; j ++){
this.removeClass(idlis[j],obj.addClass);
}
this.addClassName(idlis[obj.index],obj.addClass);
this.goOn(obj);
},
//内容切换
goOn : function (obj){
var idEle = document.getElementById(obj.id);
// 获得 需要切换的元素
var classEle = this.getClass(obj.classname,idEle.parentNode);
for ( var i = 0 ; i < classEle.length ; i ++){
this.removeClass(classEle[i],obj.addClass);
}
this.addClassName(classEle[obj.index],obj.addClass);
},
// 创建定时器
createTime : function (obj){
var that = this;
var idEle = document.getElementById(obj.id);
var idlis = idEle.getElementsByTagName("li");
var length = idlis.length;
// 双重判断是为了，排除没有isTime的对象 通过移出父元素添加定时器
if (obj.isTime==true) {
obj.timer = setInterval(function(){
obj.index ++ ;
if (obj.index>=length) {
obj.index = 0;
}
that.tabon(obj);
},obj.time)
}
},
getClass : function (classname,parent){
if(document.getElementsByClassName){
return ( parent || document).getElementsByClassName(classname);
}else{
var eles = ( parent || document).getElementsByTagName("*");
var reg = new RegExp("(^|\\s+)"+classname+"(\\s+|$)");
var arr = [];
for( var i = 0 ; i < eles.length ; i ++){
if (reg.test(eles[i].className)) {
arr.push(eles[i]);
}
}
return arr;
}
},
removeClass : function (ele,classname){
var arr = ele.className.split(" ");
for(var i = 0 ; i < arr.length ; i ++ ){
if (arr[i] == classname) {
// 删除数组 指定元素, 原数组改变
arr.splice(i,1);
i--;
}
}
ele.className = arr.join(' ');
},
addClassName : function (ele,classname){
var arr = ele.className.split(" ");
arr.push(classname);
ele.className = arr.join(" ");
}
}
window.onload = function (){
// html 结构一定要符合
tab.init("tab","tabcont","on","click",true,6000);
tab.init("one","one","on","click");
tab.init("two","one","on","click");
}
</script>
</body>
</html>
javascript选项卡切换（整合版）
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- Axure RP是一个专业的快速原型设计工具。它能快速、高效的让负责定义需求、设计功能和界面的产品人员创建网站的原...
- 实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果，选项卡个数为3个，点击选项卡或滑动...
