<div class="head">
<ul>
<li class="active">标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul>
</div>
<div class="text">one</div>
<div class="text" style="display: none;">two</div>
<div class="text" style="display: none;">three</div>
ul li {
display:inline-block;
list-style:none;
width:200px;
border:1px solid #cccccc;
}
.active {
background:blue;
}
$(function() {
$(".head li").each(function(index) {
$(this).click(function(e){
$(this).addClass("active").siblings().removeClass("active");
$(".text").eq(index).show().siblings(".text").hide();
})
});
})