您的位置：首页 > Web前端 > JQuery

jQuery实现tab功能

2015-05-30 13:00 387 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.js"></script>
<div class="maintab">
<ul class="tabtitle">
<li class="tabhover">
<a href="#">选择标题1</a>
</li>
<li class="taba">
<a href="#">选择标题2</a>
</li>
<li class="taba">
<a href="#">选择标题3</a>
</li>
</ul>
<div class="tabcontent">选择内容1</div>
<div class="tabcontent" style="DISPLAY: none">选择内容2</div>
<div class="tabcontent" style="DISPLAY: none">选择内容3</div>
</div>

<script type=text/javascript>
$(document).ready(
function(){
$(".tabtitle li").click(   //捕捉点击事件
function(){
var index=$(this).index();
$(this).attr("class","tabhover").siblings("li").attr("class","taba");  //siblings的可以获取元素的同胞元素（不包括元素自己）
$(".tabcontent").eq(index).show().siblings(".tabcontent").hide();  //index获得事件元素，自身show，同胞元素hide
}
);
}
)

</script>

</body>
</html>


主要练习了jQuery的siblings选取同胞元素的功能和show、hide功能
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航