一、好友选中
<style type="text/css">
*{ margin:0px auto; padding:0px}
#wai{ 300px; height:300px;}
.list{ 300px; height:40px; background-color:#60F; margin-bottom:2px; text-align:center; line-height:40px; vertical-align:middle; color:white}
.list:hover{ cursor:pointer;}
</style>
</head>
<body>
<div id="wai">
<div class="list" onclick="sel(this)" onmouseover="gai(this)" xz="0" onmouseout="hui()">张三</div>
<div class="list" onclick="sel(this)" onmouseover="gai(this)" xz="0" onmouseout="hui()">李四</div>
<div class="list" onclick="sel(this)" onmouseover="gai(this)" xz="0" onmouseout="hui()">王五</div>
<div class="list" onclick="sel(this)" onmouseover="gai(this)" xz="0" onmouseout="hui()">赵六</div>
<div class="list" onclick="sel(this)" onmouseover="gai(this)" xz="0" onmouseout="hui()">马七</div>
</div>
</body>
<script type="text/javascript">
function sel(d){
//让所有的变为非选中
var list = document.getElementsByClassName("list");
for(var i=0;i<list.length;i++){
list[i].style.backgroundColor = "blue";
list[i].setAttribute("xz","0");
}
//让当前的变为选中
d.style.backgroundColor = "red";
d.setAttribute("xz","1");
}
function gai(d){
//让所有的变为非选中
var list = document.getElementsByClassName("list");
for(var i=0;i<list.length;i++){
if(list[i].getAttribute("xz")=="0"){
list[i].style.backgroundColor = "blue";
}
}
//让当前的变为选中
d.style.backgroundColor = "red";
}
function hui(){
//让所有的变为非选中
var list = document.getElementsByClassName("list");
for(var i=0;i<list.length;i++){
if(list[i].getAttribute("xz")=="0"){
list[i].style.backgroundColor = "blue";
}
}
}
</script>
二、左侧下拉列表选择
<style type="text/css">
*{ margin:0px auto; padding:0px}
#wai{ 300px; height:500px; margin-top:100px;}
.list{ 300px; height:40px; background-color:#60F; text-align:center; line-height:40px; vertical-align:middle; color:white;}
.erji{ 300px; height:120px;}
.item{ 300px; height:40px; text-align:center; line-height:40px; vertical-align:middle}
</style>
</head>
<body>
<div id="wai">
<div class="list" onclick="show('chanpin')">产品中心</div>
<div id="chanpin" class="erji" style="display:none">
<div class="item">家电</div>
<div class="item">食品</div>
<div class="item">手机</div>
</div>
<div class="list" onclick="show('xinwen')">新闻中心</div>
<div id="xinwen" class="erji" style="display:none">
<div class="item">国内</div>
<div class="item">国际</div>
<div class="item">娱乐</div>
</div>
<div class="list" onclick="show('zuixin')">最新优惠</div>
<div id="zuixin" class="erji" style="display:none">
<div class="item">热销产品</div>
<div class="item">新上市</div>
<div class="item">最优惠</div>
</div>
</div>
</body>
<script type="text/javascript">
function show(id){
var d = document.getElementById(id);
if(d.style.display == "none"){
d.style.display = "block";
}else{
d.style.display = "none";
}
}
</script>
</html>