程序博客网 > 爰淘宝

下拉列表小例子

来源：互联网发布：爰淘宝编辑：程序博客网时间：2024/06/05 06:55

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<title></title>

<styletype="text/css">

ul{

display:none;

list-style:none;

margin:0;

padding:0;

text-align: center;

width:100px;

}

</style>

</head>

<body>

<divid="wrap">

<divid="title">

春雨今晚翻谁的牌子?

</div>

<ulid="down_list">

<li>日韩</li>

<li>欧美</li>

<li>保加利亚</li>

<li>尼日利亚</li>

<li>克罗地亚</li>

</ul>

</div>

<scripttype="text/javascript">

varoWrap = document.getElementById("wrap");

var aLists = document.getElementsByTagName("li");

var oDownList = document.getElementById("down_list");

oWrap.onmouseover= function (){

oDownList.style.display= "block";

}

oWrap.onmouseout= function (){

oDownList.style.display= "none";

}

// aLists[0].onmouseover = function (){

// for (var i = 0; i < aLists.length; i++) {

// aLists[i].style.backgroundColor = "";

// }

// aLists[0].style.backgroundColor = "yellow";

// }

// aLists[1].onmouseover = function (){

// for (var i = 0; i < aLists.length; i++) {

// aLists[i].style.backgroundColor = "";

// }

// aLists[1].style.backgroundColor = "yellow";

// }

// aLists[2].onmouseover = function (){

// for (var i = 0; i < aLists.length; i++) {

// aLists[i].style.backgroundColor = "";

// }

// aLists[2].style.backgroundColor = "yellow";

// }

// aLists[3].onmouseover = function (){

// for (var i = 0; i < aLists.length; i++) {

// aLists[i].style.backgroundColor = "";

// }

// aLists[3].style.backgroundColor = "yellow";

// }

// aLists[4].onmouseover = function (){

// for (var i = 0; i < aLists.length; i++) {

// aLists[i].style.backgroundColor = "";

// }

// aLists[4].style.backgroundColor = "yellow";

// }

// this关键字：事件绑定时，在事件内，指代被绑定的对象

for(var i = 0; i< aLists.length; i++) {

aLists[i].onmouseover= function (){

this.style.backgroundColor= "yellow";

}

aLists[i].onmouseout= function (){

this.style.backgroundColor= "";

}

}

</script>

</body>

</html>

0 0

爰淘宝

爰淘宝

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子 fly第三人称单数 study第三人称单数第一人称作用第三人称单数加s规则第三人称转述句怎么改人称龙王萧阳第三人称单数形式 have第三人称单数形式人称代词宾格英语第三人称过去式需要第三人称单数吗漂亮人妇李婷第6章第章两人下身结合在一起纸人第二章纯洁人妇堕落刘玲第二章烟雨故人来周夜白15章第一章嫁给植物人温宁第一章嫁给植物人土笔章人第1章嫁给植物人第章车上激荡有人旁观王婿归来第二十五章人满为患箬怎么读箬箬笠怎么读小箬村青箬笠绿蓑衣衣青箬作品温岭小箬村箬叶竹小箬村七彩岛青箬笠人类人类简史人类祖先古人类人类进化人类进化史人类起源兽性人类人类观察