<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
*{
font-family: 微软雅黑;
font-size: 14px;
}
.tab{
height:38px;
list-style-type:none;
margin:0px;
padding:0px;
}
.tab>li{
height:32px;
line-height: 32px;
text-align: center;
padding: 0px 12px;
float: left;
border-radius:10px;
border:1px solid #B5B5B5;
margin-right:5px;
cursor: pointer;
}
.tab>li:hover{ //这个不明白，求解释
border:none;
background: red;
color:#fff;
}
.in { //这个不明白，求解释 .in是什么意思
border:none;
background: #3399CC;
color:#fff;
}
.tab-body{
width:100%;
}
.tab-body>div{
border:1px solid #B5B5B5;
width:100%;
padding: 10px;
display: none;
}
</style>
<script type="text/javascript">
function showDiv(id,self){
$('.tab-head>li').removeClass('in');
$(self).addClass('in');
$('.tab-body>div').hide();
$('#'+id).slideDown(500);
}
</script>
</head>
<body>
<ul class="tab">
<li onclick="showDiv('d1',this)">单人间</li>
<li onclick="showDiv('d2',this)">双人间</li>
<li onclick="showDiv('d3',this)">三人间</li>
</ul>
<div class="tab-body">
<div id="d1">你好</div>
<div id="d2">欢迎您的到来</div>
<div id="d3">天下</div>
</div>
</body>
</html>