主要實現效果：
1、點擊對話，顯示對話；點擊聯系人，顯示聯系人
2、在聯系人界面：
實現好友列表的展開與折疊；（圖12）
實現鼠標移到好友列表上的背景顏色的變化；（圖3）
選中的好友背景顏色改變（圖4）
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#mid{
height:525px;
width:300px;
position: relative;
background-color: greenyellow;
}
#menu{
width:300px;
height:30px;
}
.list{ width:75px;
height:30px;
float:left;
text-align:center;
line-height:30px;
vertical-align:middle;
}
.list:hover{
cursor: pointer;
}
.zhu{
width: 300px;
height: 30px;
text-align: left;
vertical-align: middle;
line-height: 30px;
}
.zhu:hover{
cursor: pointer;
}
.zi{
width: 300px;
display: none;
}
.lb{
height: 30px;
width: 300px;
text-align: left;
vertical-align: middle;
line-height: 30px;
}
.xm{
margin-left: 30px;
}
.nr{
width:300px;
height:495px;
text-align:center;
line-height:200px;
vertical-align:middle;
position: relative;
}
</style>
</head>
<body>
<div id="mid">
<div id="menu">
<div class="list" style="background-color:gold" onclick="Show('d1')">會話</div>
<div class="list" style="background-color:gainsboro" onclick="Show('d2')">聯系人</div>
<div class="list" style="background-color:greenyellow" onclick="Show('d3')">群聊</div>
<div class="list" style="background-color:burlywood" onclick="Show('d4')">空間</div>
</div>
<div id="d1" class="nr" style="background-color:gold">
對話
</div>
<div id="d2" class="nr" style="background-color:gainsboro; display:none;">
<div class="zhu" onclick="show('a1')"> 我的好友</div>
<div class="zi" id="a1">
<div class="lb" onclick="Xuan(this)" xz="0" onmouseover="Bian(this)" onmouseout="Hui(this)"><span class="xm">陳一</span></div>
<div class="lb" onclick="Xuan(this)" xz="0" onmouseover="Bian(this)" onmouseout="Hui(this)"><span class="xm">王二</span></div>
</div>
<div class="zhu" onclick="show('a2')"> 特別關注</div>
<div class="zi" id="a2">
<div class="lb" onclick="Xuan(this)" xz="0" onmouseover="Bian(this)" onmouseout="Hui(this)"><span class="xm">張三</span></div>
<div class="lb" onclick="Xuan(this)" xz="0" onmouseover="Bian(this)" onmouseout="Hui(this)"><span class="xm">李四</span></div>
</div>
<div class="zhu" onclick="show('a3')"> 陌生人</div>
<div class="zi" id="a3">
<div class="lb" onclick="Xuan(this)" xz="0" onmouseover="Bian(this)" onmouseout="Hui(this)"><span class="xm">王五</span></div>
<div class="lb" onclick="Xuan(this)" xz="0" onmouseover="Bian(this)" onmouseout="Hui(this)"><span class="xm">老六</span></div>
<div class="lb" onclick="Xuan(this)" xz="0" onmouseover="Bian(this)" onmouseout="Hui(this)"><span class="xm">陳七</span></div>
</div>
<div class="zhu" onclick="show('a4')"> 黑名單</div>
<div class="zi" id="a4">
<div class="lb" onclick="Xuan(this)" xz="0" onmouseover="Bian(this)" onmouseout="Hui(this)"><span class="xm">王二</span></div>
<div class="lb" onclick="Xuan(this)" xz="0" onmouseover="Bian(this)" onmouseout="Hui(this)"><span class="xm">王二</span></div>
</div>
</div>
<div id="d3" class="nr" style="background-color:greenyellow; display:none">
群聊
</div>
<div id="d4" class="nr" style="background-color:burlywood; display:none">
空間
</div>
</div>
</body>
</html>
<script type="text/javascript">
function Show(id)
{
//隱藏所有
var attr = document.getElementsByClassName("nr");
for(var i=0;i<attr.length;i++)
{
attr[i].style.display = "none";
}
//顯示當前的
document.getElementById(id).style.display = "block";
}
//實現列表的展開與疊起
function show(id)
{
var z=document.getElementById(id);
if (z.style.display=="block")
{
z.style.display="none";
}
else{
z.style.display="block";
}
}
//展開后列表背景顏色變為白色，選中好友變為橘黃色
function Xuan(a)
{
var attr = document.getElementsByClassName("lb");
for(var i=0;i<attr.length;i++)
{
attr[i].style.backgroundColor = "white";
attr[i].setAttribute("xz","0");
}
a.setAttribute("xz","1");
a.style.backgroundColor = "orange";
}
//設置鼠標移動上的顏色變化
function Bian(a)
{
var attr = document.getElementsByClassName("lb");
for(var i=0;i<attr.length;i++)
{
if(attr[i].getAttribute("xz")=="0")
{
attr[i].style.backgroundColor = "white";
}
}
a.style.backgroundColor = "lightblue";
}
//鼠標離開后顏色回到原先的背景顏色
function Hui(a)
{
var attr = document.getElementsByClassName("lb");
for(var i=0;i<attr.length;i++)
{
if(attr[i].getAttribute("xz")=="0")
{
attr[i].style.backgroundColor = "white";
}
}
}
</script>
還需完善：
1、對話列表，群聊等未布局
2、什么時候能與數據庫對接呢？聊天功能未實現？（期待聊天功能。）