87,720
社区成员




<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#box{
width: 200px;
height: 200px;
position: relative;
border: 1px solid blue
}
ul{
margin: 0px;
padding: 0px;
position: relative;
height: 10%;
}
.nav{
display: inline-block;
width: 50%;
float: left;
text-align: center;
cursor:pointer;
}
.detail{
position: absolute;
bottom:0px;
left:0px;
margin: 0px;
padding: 0px;
width: 100%;
height: 90%;
background: #ccc;
visibility: hidden;
}
.current{
visibility: visible;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li id="class_1" class="nav current">人气</li>
<li id="class_2" class="nav">热卖</li>
</ul>
<div id="detail_class_1" class="detail current">人气人气人气人气人气人气人气</div>
<div id="detail_class_2" class="detail">热卖热卖热卖热卖热卖热卖热卖</div>
</div>
<script type="text/javascript" src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(".nav").click(function(){
if (!$(this).hasClass("current")){
$(this).addClass("current").siblings().removeClass("current");
$("#detail_"+this.id).addClass("current").siblings().removeClass("current")
}
});
</script>
</body>
</html>