jQuery 实现的一个简单的选项卡。
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=gb2312"
/>
<title></title>
<link href=
"css/style.css"
rel=
"stylesheet"
type=
"text/css"
/>
<!-- 引入jQuery -->
<script src=
"../scripts/jquery-1.3.1.js"
type=
"text/javascript"
></script>
<script type=
"text/javascript"
>
$(function(){
var $div_li =$(
"div.tab_menu ul li"
);
$div_li.click(function(){
$(
this
).addClass(
"selected"
)
.siblings().removeClass(
"selected"
);
var index = $div_li.index(
this
);
$(
"div.tab_box > div"
)
.eq(index).show()
.siblings().hide();
}).hover(function(){
$(
this
).addClass(
"hover"
);
},function(){
$(
this
).removeClass(
"hover"
);
})
})
</script>
</head>
<body>
<div
class
=
"tab"
>
<div
class
=
"tab_menu"
>
<ul>
<li
class
=
"selected"
>时事</li>
<li>体育</li>
<li>娱乐</li>
</ul>
</div>
<div
class
=
"tab_box"
>
<div>时事</div>
<div
class
=
"hide"
>体育</div>
<div
class
=
"hide"
>娱乐</div>
</div>
</div>
</body>
</html>
首先绑定事件,绑定事件后将当前单击的<li>元素高亮,然后去掉其他同辈<li>元素的高亮。
var $div_li = $(
"div.tab_menu ul li"
);
$div_li.click(function(){
$(
this
).addClass(
"selected"
)
.siblings().removeClass(
"selected"
);
});
单击选项卡后,当前<li>元素处于高亮状态,而其他的<li>元素已去掉高亮状态。但选项卡下面的内容还没切换,因此需要将下面的内容也对应一个<div>区域。
因此可以根据当前单击的<li>元素在所有<li>元素中的索引,然后通过索引来显示对应的区域。
var $div_li= $(
"div.tab_menu ul li"
) ;
$div_li.click(function(){
$(
this
) .addClass(
"selected"
)
.siblings().removeClass(
"selected"
);
var index=$div_li.index(
this
);
$(
"div.tab_box > div"
)
.eq(index).show()
.siblings().hide();
}).hover(function(){
$(
this
).addClass(
"hover"
);
},function(){
$(
this
).removeClass(
"hover"
);
})