xml
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选项卡</title>
<style>
*{
margin:0;
border:0;
padding:0;
}
.box{
width: 1000px;
margin:50px auto;
}
.tab dd{
float:left;
width:100px;
padding:3px;
margin-right:1px;
background: #FF0000;
color:#fff;
text-align: center;
cursor: pointer;
}
.tab dd:hover,.tab dd.active{
background: #990000;
}
.goods{
clear:both;
}
.goods div{
display: none;
}
.goods div.current{
display: block;
}
</style>
<script src="../jquery-1.8.2.js"></script>
<script>
$(function(){
$('dd').on('click',function(){
$(this).addClass('active').siblings().removeClass('active');
//拿到dd中所对应的下标
var i=$(this).index();
//以下标的值来找div的位置
$('.goods div').hide().eq(i).show(1000)
})
})
</script>
</head>
<body>
<div class="box">
<dl class="tab">
<dd class="active">手机</dd>
<dd>家电</dd>
<dd>服装</dd>
<dd>数码</dd>
<dd>玩具</dd>
</dl>
<div class="goods">
<div class="current"><h1>手机商品</h1></div>
<div><h1>家电商品</h1></div>
<div><h1>服装商品</h1></div>
<div><h1>数码商品</h1></div>
<div><h1>玩具商品</h1></div>
</div>
</div>
</body>
</html>