<style>
*{
margin: 0;
padding: 0;
}
.box{
position: relative;
width: 600px;
height: 400px;
margin: 100px auto;
background: wheat;
}
.box li{
float: left;
line-height: 30px;
padding: 0 20px;
cursor: pointer;
margin-left: 50px;
background: pink;
list-style: none;
border-bottom: 1px solid pink;
}
.box .cur{
background: yellow;
color: white;
}
.box ul{
height: 50px;
}
.box .d{
position: absolute;
left: 0;
top: 40px;
width: 600px;
height: 400px;
}
</style>
<body>
<div class="box" id="b">
<ul>
<li class="cur">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div class="d" style="background: pink;"></div>
<div class="d" style="background: yellow;"></div>
<div class="d" style="background: blue;"></div>
<div class="d" style="background: red;"></div>
<div class="d" style="background: hotpink;"></div>
</div>
<script>
// 下方展示下标为1的，其他的.d兄弟元素隐藏
$('#b .d').eq(0).show().siblings('.d').hide();
//点击标题，当前标题添加样式，其它兄弟元素取消样式
$('#b li').click(function(){
$(this).addClass('cur').siblings().removeClass('cur');
var i = $(this).index(); //点击当前元素的下标值
$('#b .d').eq(i).show().siblings('.d').hide();
});
</script>
</body>
最终实现的效果如下：