<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<script src="./jquery-1.8.3.js"></script>
<style>
*{margin:0;padding:0;list-style: none}
.wrap{
300px;
height:400px;
border:1px solid red;
margin:0 auto;
}
.title{
height:50px;
}
.title li{
100px;
height:50px;
border:1px solid red;
float:left;
box-sizing:border-box;
border-top:none;
border-left:none;
text-align:center;
line-height: 50px;
}
/*last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。*/
.title li:last-child{
border-right:none;
}
.title .item{
border-bottom:none;
}
.content li{
100%;
height:350px;
/*border:1px solid green;*/
text-align:center;
line-height:350px;
display:none;
}
.content .active{
display:block;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="title">
<li class="item">标题一</li>
<li >标题二</li>
<li >标题三</li>
</ul>
<ul class="content">
<li class="active">内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
</div>
<script>
// 给标题添加绑定事件
$('.title li').click(function(){
// siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的
$(this).addClass('item').siblings().removeClass('item');
// 获取索引值 通过索引值将标题和内容 关联起来
var index=$(this).index();
$('.content li').eq(index).addClass('active');
$('.content li').eq(index).siblings().removeClass('active');
})
</script>
</body>
</html>