<html>代码
基本架构：一个大的div下面2个ul，ul下面各三个li
<div class="big">
<ul class="content">
<li class="one">水果</li>
<li>服装</li>
<li>电器</li>
</ul>
<ul class="content1">
<li class="one2">苹果、西瓜、黑提、葡萄、橘子、芒果</li>
<li>长袖、短袖、衬衫、阔腿裤、西裤</li>
<li>洗衣机、液晶电视、油烟机、空调</li>
</ul>
</div>
<css>中
* {
margin:0;
padding:0;
}
.big {
300px;
margin: 50px auto;
font-size: 20px;
}
ul,li {
list-style: none;
}
.content li {
80px;
background: #F9D6D6;
border: 1px solid #666;
border-bottom: 0; /* 下边框为0 */
float: left;
padding:5px;
margin-right: 2px;
text-align: center;
cursor: pointer; /*鼠标小手*/
}
.content .one {
font-weight: bold;
z-index: 100;
position: relative;
}
.content1 {
255px;
height: 120px;
padding: 10px;
background-color: #F9D6D6;
clear: left;
border: 1px solid #666;
position:relative;
top: -1px;
}
.content1 li{
line-height: 40px;
text-align: center;
display: none;
}
.content1 .one2{
display: block;
}
<js>
$(function () {
//找到content下面所有的li each() 方法规定为每个匹配元素规定运行的函数（遍历循环）
$(".content li").each(function(index) {
$(this).click(function() {
//增加一个content one样式 并移除第一个ul里面名为'one'的所有同胞元素
$(this).addClass("content one").siblings().removeClass("one");
$(".content1 li:eq("+index+")").show().siblings().hide();
})
})
})