<!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功能
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
