<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>閉包--自執行函數--案例--淘寶例子</title>
<style type="text/css">
.container{
width: 300px;
height: 150px;
background-color: #16A085;
}
.nav_ul{
padding: 0;
list-style: none;
height: 35px;
}
.nav_ul li{
float: left;
height: 35px;
line-height: 35px;
text-align: center;
width: 25%;
transition: all .5s;
cursor: pointer;
}
.select_li{
color: white;
border-bottom: 2px solid #FD4401;
}
.content{
width: 300px;
}
.content p ul{
padding: 0;
list-style: none;
width: 300px;
}
.content p ul li{
float: left;
width: 50%;
text-align: center;
height: 40px;
line-height: 40px;
cursor: pointer;
}
.content p{
position: absolute;
left: 0;
top: 45px;
display: none;
}
.content .select_p{
display: block;
}
</style>
</head>
<body>
<p class="container">
<p class="nav">
<ul class="nav_ul">
<li class="select_li">劇集</li>
<li>電影</li>
<li>綜藝</li>
<li>動漫</li>
</ul>
</p>
<p class="content">
<p class="select_p">
<ul>
<li onclick="window.location.href='https://www.hao123.com/'">瑯琊榜</li>
<li onclick="window.location.href='https://www.hao123.com/'">盲約</li>
<li onclick="window.location.href='https://www.hao123.com/'">無心法師</li>
<li onclick="window.location.href='https://www.hao123.com/'">高能醫少</li>
</ul>
</p>
<p>
<ul>
<li onclick="window.location.href='https://www.hao123.com/'">加勒比</li>
<li onclick="window.location.href='https://www.hao123.com/'">繡春刀</li>
<li onclick="window.location.href='https://www.hao123.com/'">鮫珠傳</li>
<li onclick="window.location.href='https://www.hao123.com/'">變形金剛</li>
</ul>
</p>
<p>
<ul>
<li onclick="window.location.href='https://www.hao123.com/'">坑王駕到</li>
<li onclick="window.location.href='https://www.hao123.com/'">快樂大本營</li>
<li onclick="window.location.href='https://www.hao123.com/'">明星大偵探</li>
<li onclick="window.location.href='https://www.hao123.com/'">爸爸去哪兒</li>
</ul>
</p>
<p>
<ul>
<li onclick="window.location.href='https://www.hao123.com/'">友人帳</li>
<li onclick="window.location.href='https://www.hao123.com/'">黑賊王</li>
<li onclick="window.location.href='https://www.hao123.com/'">你的名字</li>
<li onclick="window.location.href='https://www.hao123.com/'">柯南</li>
</ul>
</p>
</p>
</p>
<script>
var liList=document.querySelector('.nav_ul').querySelectorAll('li');
var pList=document.querySelector('.content').querySelectorAll('p');
var timer=null;
// 每一個li鼠標進入事件
for(var index=0;index<liList.length;index++){
// 自執行函數在一寫完、一綁定的時候，不需要觸發就執行
// 自執行函數返回function，實際上 當鼠標進入時實際上執行的是返回的函數
liList[index].onmouseenter= (function (selectIndex) {
return function () {
//增加延遲事件
timer=setTimeout(function () {
//清除所有樣式 li 顯示相應p中的ul 樣式也去掉
for(var i=0;i<liList.length;i++){
liList[i].removeAttribute('class');
pList[i].removeAttribute('class');
}
liList[selectIndex].setAttribute('class','select_li');
pList[selectIndex].setAttribute('class','select_p');
},600);
};
}(index));
// 添加鼠標移出事件，保證離開的時候清除延遲器，不影響下一次操作
liList[index].onmouseleave = function (eve) {
clearTimeout(timer);
};
}
</script>
</body>
</html>聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
