<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
margin: 200px auto;
width: 310px;
}
ul,ol{list-style-type: none;}
ul li{
float: left;
width: 100px;
text-align: center;
height: 50px;
line-height: 50px;
cursor: pointer;
}
.ulShow{
background: #b0f7c3;
border: 1px solid blue;
border-bottom: none;
}
.ulHide{
background: white;
border-bottom: 1px solid blue;
}
ol{
display: none;
height: 250px;
width: 300px;
background: #b0f7c3;
}
.olShow{
display: block;
border: 1px solid blue;
border-top: none;
}
</style>
</head>
<body>
<div id="box">
<ul class="nav">
<li class="ulShow">夏季凉鞋</li>
<li class="ulHide">冬季羽绒</li>
<li class="ulHide">四季T恤>
</ul>
<ol class="olShow">
<li>夏季凉鞋</li>
<li>夏季凉鞋</li>
<li>夏季凉鞋</li>
</ol>
<ol>
<li>冬季羽绒</li>
<li>冬季羽绒</li>
<li>冬季羽绒</li>
</ol>
<ol>
<li>四季T恤</li>
<li>四季T恤</li>
<li>四季T恤</li>
</ol>
</div>
<script type="text/javascript">
$("#box>ul>li").click(function() {
var index = $(this).index();
$("#box>ul>li").attr("class","ulHide");
$(this).attr("class","ulShow");
$("#box>ol").removeClass();
$("#box>ol").eq(index).addClass('olShow')
});
</script>
</body>
</html>
效果展示：
