選項(xiàng)卡：
//html
<div id="box">
<ul>
<li class="one">選項(xiàng)一</li>
<li>選項(xiàng)二</li>
<li>選項(xiàng)三</li>
</ul>
<div id="content">
<div class="mian" style="display:block">內(nèi)容一</div>
<div class="mian">內(nèi)容二</div>
<div class="mian">內(nèi)容三</div>
</div>
</div>
#box {
padding: 100px;
font-size: 14px;
}
#box ul {
list-style-type: none;
height: 30px;
line-height: 30px;
}
#box ul li {
float: left;
border: 1px solid #999;
padding: 0 10px;
margin-right: 10px;
border-bottom: none;
cursor: pointer;
}
#content {
border: 1px solid #999;
width: 325px;
height: auto;
padding: 10px;
}
#content .mian {
display: none;
}
#box ul li.two {
background: orange; /*設(shè)定選中時(shí)背景顏色 */
} /* li選中時(shí)的背景顏色凌外，先后不一樣效果有微小差別*/
#box ul li.one {
background: #fff;/* 第一個(gè)默認(rèn)背景 色 */
}
//js
var oDiv = document.getElementById("box");
var aLi = document.getElementsByTagName("li");
var aDiv = document.getElementsByClassName("mian");
var i = 0;
for (i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onclick = function() {
for (i = 0; i < aLi.length; i++) { //循環(huán)未選中的元素的樣式
aLi[i].className = "";
aDiv[i].style.display = "none";
}
this.className = "one";
aDiv[this.index].style.display = "block";
};
}
jquery實(shí)現(xiàn)的效果:
$(function() {
var aLi = $("#box ul li");
// gt(N) 選擇器，選中大于n所有元素
$(".mian:gt(0)").hide();
aLi.click(function() {
$(this).addClass("one").siblings().removeClass();
//獲取選擇元素的下標(biāo)
var aDiv = $(this).index();
//:eq()和.eq()他們都是選擇指定元素念赶，:eq()選擇器選中的元素喊巍，.eq()調(diào)用元素時(shí)用
$(".mian").eq(aDiv).show().siblings().hide();
});
aLi.hover(function() {
$(this).addClass("two").siblings().removeClass("two"); //removeClass()刪除two免猾，選中的li樣式不受干擾
});
});
