學(xué)習(xí)資料來(lái)源
http://v.apelearn.com/student.php
選項(xiàng)卡原理
規(guī)定： 選中代表激活万俗，未選中代表失活
菜單欄目
先將所有需要切換元素的狀態(tài)變?yōu)槭Щ睿缓髮?dāng)前選中的元素狀態(tài)設(shè)置為激活狀態(tài)递沪；
欄目的具體內(nèi)容
先將所有的欄目?jī)?nèi)容項(xiàng)設(shè)置為隱藏狀態(tài)勇蝙，然后再將當(dāng)前選擇的菜單選項(xiàng)對(duì)應(yīng)的具體內(nèi)容的狀態(tài)設(shè)置為顯示沫勿。
方法1：實(shí)現(xiàn)思路（使用class來(lái)實(shí)現(xiàn)）
1.獲取所有的菜單選項(xiàng)，及所有菜單選項(xiàng)對(duì)應(yīng)的選項(xiàng)內(nèi)容味混；
2.遍歷菜單選項(xiàng)數(shù)組产雹，給每一個(gè)菜單選項(xiàng)自定義一個(gè)索引，并將遍歷變量（i）賦給該值翁锡；
3. 給每一個(gè)選項(xiàng)綁定鼠標(biāo)滑過(guò)事件蔓挖；
4.在鼠標(biāo)滑過(guò)事件中，再次遍歷所有的菜單選項(xiàng)馆衔，將每一個(gè)菜單選項(xiàng)的狀態(tài)設(shè)置為失活瘟判，每個(gè)菜單項(xiàng)的具體內(nèi)容的狀態(tài)設(shè)置為隱藏；
5.遍歷完成后角溃，再給當(dāng)前選中的菜單項(xiàng)設(shè)置激活狀態(tài)（active）拷获，以及當(dāng)前選項(xiàng)對(duì)應(yīng)的內(nèi)容項(xiàng)的狀態(tài)設(shè)置為顯示；
Demo代碼實(shí)現(xiàn)--jquery寫(xiě)法
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";
});
}
});
效果圖
