js的例子
一、好友選中
<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>
</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{ 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>
</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>
js的例子