jQuery实现tab选项卡

学习资料来源

http://v.apelearn.com/student.php

选项卡原理

规定： 选中代表激活，未选中代表失活

菜单栏目

先将所有需要切换元素的状态变为失活，然后将当前选中的元素状态设置为激活状态；

栏目的具体内容

先将所有的栏目内容项设置为隐藏状态，然后再将当前选择的菜单选项对应的具体内容的状态设置为显示。

方法1：实现思路（使用class来实现）

1.获取所有的菜单选项，及所有菜单选项对应的选项内容；

2.遍历菜单选项数组，给每一个菜单选项自定义一个索引，并将遍历变量（i）赋给该值；

3. 给每一个选项绑定鼠标滑过事件；

4.在鼠标滑过事件中，再次遍历所有的菜单选项，将每一个菜单选项的状态设置为失活，每个菜单项的具体内容的状态设置为隐藏；

5.遍历完成后，再给当前选中的菜单项设置激活状态（active），以及当前选项对应的内容项的状态设置为显示；

Demo代码实现--jquery写法

HTML

• menu1
• menu2
• menu3
• menu4
• menu5

content1

content2

content3

content4

content5

CSS

div,ul,li,a{margin:0;padding:0;list-style:none;text-decoration:none;}

.clearfix:after{content:'';display:block;clear:both;overflow:hidden;visibility:hidden;}

.clearfix{zoom:1;}

.tab{width:900px;margin:30px auto;}

.tab.tab-wrap{border-bottom:1px solid#f00;}

.tab-menu{float:right;}

.tab-menuli,.tab-menuli a{display:inline-block;*display:inline;float:left;height:34px;line-height:34px;font-size:14px;font-family:"Microsoft YaHei","微软雅黑";padding:0 14px;text-align:center;}

.active{position:relative;border:1px solid#f00;border-bottom:none;height:34px;line-height:34px;background-color:#fff;margin-bottom:-1px;margin-left:-1px;margin-right:-1px;}

.content{display:none;height:400px;width:900px;line-height:400px;background:olivedrab;float:left;}

.show{display:block;}

JS

$(function() {

var aLi =$('.tab-menu').find('li');

var aDiv =$('.tab-content').find('div');

for(var i =0;i < aLi.length;i++) {

$(aLi[i])[0].index= i;

$(aLi[i]).mouseover(function() {

for(var j =0;j < aLi.length;j++) {

$(aLi[j]).removeClass('active');//JavaScript使用obj.className = "";

$(aDiv[j]).removeClass('show');//JavaScript使用obj.className = "";

}

$(this).addClass('active');//JavaScript使用obj.className = "active";

$(aDiv[$(this)[0].index]).addClass('show');//JavaScript使用obj.className = "show";

});

}

});

效果图

选项卡案例1