学习资料来源
http://v.apelearn.com/student.php
选项卡原理
规定： 选中代表激活，未选中代表失活
菜单栏目
先将所有需要切换元素的状态变为失活，然后将当前选中的元素状态设置为激活状态；
栏目的具体内容
先将所有的栏目内容项设置为隐藏状态，然后再将当前选择的菜单选项对应的具体内容的状态设置为显示。
方法1：实现思路（使用class来实现）
1.获取所有的菜单选项，及所有菜单选项对应的选项内容；
2.遍历菜单选项数组，给每一个菜单选项自定义一个索引，并将遍历变量（i）赋给该值；
3. 给每一个选项绑定鼠标滑过事件；
4.在鼠标滑过事件中，再次遍历所有的菜单选项，将每一个菜单选项的状态设置为失活，每个菜单项的具体内容的状态设置为隐藏；
5.遍历完成后，再给当前选中的菜单项设置激活状态（active），以及当前选项对应的内容项的状态设置为显示；
Demo代码实现--jquery写法
HTML
<div class="tab clearfix">
<div class="tab-wrap clearfix">
<ul class="tab-menu">
<li class="active"><a href="javascript:;">menu1</a></li>
<li><a href="javascript:;">menu2</a></li>
<li><a href="javascript:;">menu3</a></li>
<li><a href="javascript:;">menu4</a></li>
<li><a href="javascript:;">menu5</a></li>
</ul>
</div>
<div class="tab-content clearfix">
<div class="content show">content1</div>
<div class="content">content2</div>
<div class="content">content3</div>
<div class="content">content4</div>
<div class="content">content5</div>
</div>
</div>
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";
});
}
});
效果图
