First, friends selected
<style type= "Text/css" >
*{margin:0px auto; padding:0px}
#wai {width:300px; height:300px;}
. list{width: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>
<body>
<div id= "Wai" >
<div class= "list" onclick= "sel (This)" onmouseover= "Gai (This)" xz= "0" onmouseout= "hui ()" > Zhang San </div>
<div class= "list" onclick= "sel (This)" onmouseover= "Gai (This)" xz= "0" onmouseout= "hui ()" > John Doe </div>
<div class= "list" onclick= "sel (This)" onmouseover= "Gai (This)" xz= "0" onmouseout= "hui ()" > Harry </div>
<div class= "list" onclick= "sel (This)" onmouseover= "Gai (This)" xz= "0" onmouseout= "hui ()" > Zhao Liu </div>
<div class= "list" onclick= "sel (This)" onmouseover= "Gai (This)" xz= "0" onmouseout= "hui ()" > Ma VII </div>
</div>
</body>
<script type= "Text/javascript" >
Function sel (d) {
Make all the non-selected
var list = document.getelementsbyclassname ("list");
for (Var i=0;i<list.length;i++) {
List[i].style.backgroundcolor = "Blue";
List[i].setattribute ("XZ", "0");
}
Make the current change to selected
D.style.backgroundcolor = "Red";
D.setattribute ("XZ", "1");
}
function Gai (d) {
Make all the non-selected
var list = document.getelementsbyclassname ("list");
for (Var i=0;i<list.length;i++) {
if (List[i].getattribute ("xz") = = = "0") {
List[i].style.backgroundcolor = "Blue";
}
}
Make the current change to selected
D.style.backgroundcolor = "Red";
}
Function Hui () {
Make all the non-selected
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>
Second, the left drop-down list selection
<style type= "Text/css" >
*{margin:0px auto; padding:0px}
#wai {width:300px; height:500px; margin-top:100px;}
. list{width:300px; height:40px; Background-color: #60F; text-align:center; line-height:40px; vertical-align:middle; Color:white;}
. erji{width:300px; height:120px;}
. item{width:300px; height:40px; text-align:center; line-height:40px; Vertical-align:middle}
</style>
<body>
<div id= "Wai";
<div class= "list" onclick= "Show (' Chanpin ')" > Product center </div>
<div id= " Chanpin "class=" Erji "style=" Display:none "
<div class=" Item "> Appliance </div>
<div class=" Item " > Food </div>
<div class= "item" > Phone </div>
</div>
<div class= "list" onclick= " Show (' Xinwen ') > News Center </div>,
<div id= "Xinwen" class= "Erji" style= "Display:none";
<div class= "Item" > Domestic </div>
<div class= "Item" > International </div>
<div class= "item" > Entertainment </div>
</div>
<div class= "list" onclick= "Show (' Zuixin ')" > latest offers </div>
<div id= "Zuixin" class= " Erji "style=" Display:none "
<div class=" item "> Hot products </div>
<div class=" Item "> New Listing </div
<div class= "Item" > most favorable </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>
Example of JS