<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{border: 1px dashed #eee;width: 200px;margin: 50px;}
#box ul{width: 100%;list-style: none;height: 31px;overflow: hidden;}
#box ul.show{height: auto;}
#box ul li{background: #fff;font-weight: bold;font-size: 12px;text-indent: 10px;color: #000;border-bottom: 1px solid #eee;height: 25px;width: 100%;line-height: 25px;cursor: default;}
#box ul li:hover{background: green;}
#box ul li.title{background: pink;font-size: 14px;text-indent: 5px;color: #fff;line-height: 30px;height: 30px;cursor: pointer;}
</style>
</head>
<body>
<div id="box">
<ul class="show">
<li class="title">同事</li>
<li>同事1</li>
<li>同事2</li>
<li>同事3</li>
</ul>
<ul>
<li class="title">好友</li>
<li>好友1</li>
<li>好友2</li>
</ul>
<ul>
<li class="title">陌生人</li>
<li>陌生人1</li>
<li>陌生人2</li>
</ul>
</div>
<script>
var aUl=document.querySelectorAll("#box ul"),
aTitle=document.getElementsByClassName('title'),
length=aTitle.length,
index=0;
for(var i=0;i<length;i++){
//自定义属性
aTitle[i].goudan=i;
aTitle[i].onclick=function(){
//前一个ul去掉名字
aUl[index].className="";
//index变成当前序号
index=this.goudan;
//当前ul添加名字
aUl[index].className="show";
}
}
</script>
</body>
</html>效果图如下：
