<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
body{
padding: 50px 300px;
}
#one li{
width: 100px;
height: 50px;
float: left;
line-height: 50px;
text-align: center;
/*margin-left: 5px;*/
background: #1E90FF;
}
.two{
display: none;
}
</style>
<script type="text/javascript">
//面向过程写法
// window.οnlοad=function(){
// var oOne=document.getElementById('one');
// var aLi=oOne.children;
// var aUl=oOne.getElementsByTagName('ul');
// for (var i=0;i<aLi.length;i++) {
// aLi[i].index=i;
// aLi[i].οnmοuseοver=function(){
// this.style.backgroundColor='red';
// aUl[this.index].style.display='block'
// };
// aLi[i].οnmοuseοut=function(){
// this.style.backgroundColor='#1E90FF';
// aUl[this.index].style.display='none'
// };
// }
// };
//面向对象写法
//写面向对象的做法,先写面向过程 再改写成面向对象 三步曲 1对象 实例 2原型 添加属性 3构造方法 函数里面尽量不要嵌套函数,主要主要改成this时是否同一个指向,不然的话就要改 和转参数
//对象 实例
window.οnlοad=function(){
var b1=new Hg();
b1.init();
}
//原型 添加属性
function Hg(){
this.oOne=document.getElementById('one');
this.aLi=this.oOne.children;
this.aUl=this.oOne.getElementsByTagName('ul');
}
//构造函数 方法
Hg.prototype.init=function(){
var _this=this;
for (var i=0;i<this.aLi.length;i++) {
this.aLi[i].index=i;
this.aLi[i].οnmοuseοver=function(){
_this.aa(this);//this指向不对,传参数
};
this.aLi[i].οnmοuseοut=function(){
_this.cc(this);//this指向不对,传参数
};
}
}
Hg.prototype.aa=function(li){//this指向不对,传参数
var _this=this;
li.style.backgroundColor='red';
_this.aUl[li.index].style.display='block'
}
Hg.prototype.cc=function(ul){//this指向不对,传参数
var _this=this;
ul.style.backgroundColor='#1E90FF';
_this.aUl[ul.index].style.display='none'
}
</script>
</head>
<body>
<ul id="one">
<li>个数
<ul class="two">
<li>个数</li>
<li>电饭锅</li>
<li>的人</li>
</ul>
</li>
<li>时光隧道
<ul class="two">
<li>个数</li>
<li>电饭锅</li>
<li>的人</li>
</ul>
</li>
<li>而二哥
<ul class="two">
<li>个数</li>
<li>电饭锅</li>
<li>的人</li>
</ul>
</li>
<li>好地方
<ul class="two">
<li>个数</li>
<li>电饭锅</li>
<li>的人</li>
</ul>
</li>
<li>电饭锅
<ul class="two">
<li>个数</li>
<li>电饭锅</li>
<li>的人</li>
</ul>
</li>
</ul>
</body>
</html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
body{
padding: 50px 300px;
}
#one li{
width: 100px;
height: 50px;
float: left;
line-height: 50px;
text-align: center;
/*margin-left: 5px;*/
background: #1E90FF;
}
.two{
display: none;
}
</style>
<script type="text/javascript">
//面向过程写法
// window.οnlοad=function(){
// var oOne=document.getElementById('one');
// var aLi=oOne.children;
// var aUl=oOne.getElementsByTagName('ul');
// for (var i=0;i<aLi.length;i++) {
// aLi[i].index=i;
// aLi[i].οnmοuseοver=function(){
// this.style.backgroundColor='red';
// aUl[this.index].style.display='block'
// };
// aLi[i].οnmοuseοut=function(){
// this.style.backgroundColor='#1E90FF';
// aUl[this.index].style.display='none'
// };
// }
// };
//面向对象写法
//写面向对象的做法,先写面向过程 再改写成面向对象 三步曲 1对象 实例 2原型 添加属性 3构造方法 函数里面尽量不要嵌套函数,主要主要改成this时是否同一个指向,不然的话就要改 和转参数
//对象 实例
window.οnlοad=function(){
var b1=new Hg();
b1.init();
}
//原型 添加属性
function Hg(){
this.oOne=document.getElementById('one');
this.aLi=this.oOne.children;
this.aUl=this.oOne.getElementsByTagName('ul');
}
//构造函数 方法
Hg.prototype.init=function(){
var _this=this;
for (var i=0;i<this.aLi.length;i++) {
this.aLi[i].index=i;
this.aLi[i].οnmοuseοver=function(){
_this.aa(this);//this指向不对,传参数
};
this.aLi[i].οnmοuseοut=function(){
_this.cc(this);//this指向不对,传参数
};
}
}
Hg.prototype.aa=function(li){//this指向不对,传参数
var _this=this;
li.style.backgroundColor='red';
_this.aUl[li.index].style.display='block'
}
Hg.prototype.cc=function(ul){//this指向不对,传参数
var _this=this;
ul.style.backgroundColor='#1E90FF';
_this.aUl[ul.index].style.display='none'
}
</script>
</head>
<body>
<ul id="one">
<li>个数
<ul class="two">
<li>个数</li>
<li>电饭锅</li>
<li>的人</li>
</ul>
</li>
<li>时光隧道
<ul class="two">
<li>个数</li>
<li>电饭锅</li>
<li>的人</li>
</ul>
</li>
<li>而二哥
<ul class="two">
<li>个数</li>
<li>电饭锅</li>
<li>的人</li>
</ul>
</li>
<li>好地方
<ul class="two">
<li>个数</li>
<li>电饭锅</li>
<li>的人</li>
</ul>
</li>
<li>电饭锅
<ul class="two">
<li>个数</li>
<li>电饭锅</li>
<li>的人</li>
</ul>
</li>
</ul>
</body>
</html>