极客观点
项目管理
HarmonyOS
失败的代码在注释中
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>淘宝卖家中心</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
.nav-option {
width: 110px;
height: 30px;
line-height: 30px;
overflow: hidden;
margin: 50px auto;
}
.nav-option .sell-center:hover{
color: orange;
}
.nav-option ul li {
line-height: 28px;
}
.show {
overflow: visible;
}
.bgcGray {
background-color: #F5F5F5;
}
.bgcWhite {
background-color: #fff;
}
</style>
<script>
window.onload = function () {
var navOption = document.getElementById("nav-option");
var arrLi = navOption.getElementsByTagName("li");
var len = arrLi.length;
navOption.onmouseover = function () {
navOption.className += " show";
}
navOption.onmouseout = function () {
navOption.className = "nav-option";
}
// 想将上面两段代码，navOption的鼠标移入、移出事件改用函数调用的方式写
// 但实现不了，请问哪里错了？
// fnTab(navOption,onmouseover,"nav-option show");
// fnTab(navOption,onmouseout,"nav-option");
// function fnTab(name,evt,cclassName){
// name[evt] = function (){
// name.className = cclassName;
// }
// }
for(var i=0;i<len;i++){
arrLi[i].onmouseover = function () {
this.className = "bgcGray";
}
arrLi[i].onmouseout = function () {
this.className = "bgcWhite";
}
}
}
</script>
</head>
<body>
<ul>
<li class="nav-option" id="nav-option">
<a href="#" class="sell-center">卖家中心</a>
<ul>
<li><a href="#">免费开店</a></li>
<li><a href="#">已卖出的宝贝</a></li>
<li><a href="#">出售中的宝贝</a></li>
<li><a href="#">卖家服务市场</a></li>
<li><a href="#">卖家培训中心</a></li>
</ul>
</li>
</ul>
</body>
</html>