<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.tab-panes ul{
margin: 0;
padding: 0;
}
.tab-panes ul li{
list-style-type: none;
display: inline-block;
background: pink;
padding: 3px 10px;
border-radius:10px 10px 0 0 ;
color: blueviolet;
font-weight: 200;
cursor: pointer;
}
.tab-panes ul li:hover{
background-color: #5E5E5E;
}
.tab-panes ul li.active{
background-color: #5E5E5E;
}
.tab-panes .panel{
display: none;
background: gray;
padding: 30px;
border-radius:0 0 10px 10px ;
}
.tab-panes .panel.active{
display: block;
}
</style>
</head>
<body>
<div class="tab-panes">
<ul class="tabs">
<li data-panelId="panel1" class="active">panel1</li>
<li data-panelId="panel2">panel2</li>
<li data-panelId="panel3">panel3</li>
<li data-panelId="panel4">panel4</li>
</ul>
<div id="panel1" class="panel active">
content1<br />
content1<br />
content1<br />
content1<br />
</div>
<div id="panel2" class="panel">
content2<br />
content2<br />
content2<br />
content2<br />
</div>
<div id="panel3" class="panel">
content3<br />
content3<br />
content3<br />
content3<br />
</div>
<div id="panel4" class="panel">
content4<br />
content4<br />
content4<br />
content4<br />
</div>
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//为4个li添加点击事件
$('.tab-panes .tabs li').on('click',function(){
//解决按钮的活跃状态
$('.tab-panes ul li.active').removeClass('active')
//找到需要展示的div
var show = $(this).attr('data-panelId')
//隐藏当前的
$('.tab-panes .panel.active').slideUp(300)
//让新的展示出来
$('#'+show).slideDown(300,function(){
$(this).addClass('active');
})
//让当前按钮成为活跃状态
$(this).addClass('active');
})
})
</script>
</body>
</html>