js中关于导航切换效果-之一(鼠标移动)
<html lang="'en">
<head>
<meta charset="UTF-8">
<title>Tab切换-自动</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript">
/*
要求：1:完成鼠标移上导航切换选项卡的效果(上下文字一起改变);
2:使用定时器完成自动切换的效果
*/
window.οnlοad=function(){
changeTab();
}
function changeTab(){
var tit = document.getElementById('notice-tit');
var lis = tit.getElementsByTagName('li');
var con = document.getElementById('notice-con');
var divs = con.getElementsByTagName('div');
for(var i=0;i<lis.length;i++){
lis[i].id = i;
lis[i].onmouseover = function(){
for(var j=0;j<lis.length;j++){
lis[j].className ="";
divs[j].style.display ="none";
}
lis[this.id].className = "select";
divs[this.id].style.display = "block";
}
}
}
</script>
</head>
<body>
<div id="notice" class="notice">
<div id="notice-tit" class="notice-tit">
<ul>
<li class="select">
<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>
</div>
<div id="notice-con" class="notice-con">
<div class="mod" style="display:block">
<ul>
<li>
<a href="#">
张勇：要玩快乐足球
</a>
</li>
<li>
<a href="#">
阿里2000万驰援灾区！
</a>
</li>
<li>
<a href="#">
旅游宝让你边玩边赚钱
</a>
</li>
<li>
<a href="#">
多行跟进阿里信用贷款
</a>
</li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li>
<span>
[
<a href="#">通知</a>
]
</span>
<a href="#">
"滥发"即将换新
</a>
</li>
<li>
<span>
[
<a href="#">通知</a>
]
</span>
<a href="#">
比特币严管啦！
</a>
</li>
<li>
<span>
[
<a href="#">通知</a>
]
</span>
<a href="#">
禁发商品名录！
</a>
</li>
<li>
<span>
[
<a href="#">通知</a>
]
</span>
<a href="#">
商品属性限制
</a>
</li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li>
<span>
[
<a href="#">聚焦</a>
]
</span>
<a href="#">
金牌卖家再启航
</a>
</li>
<li>
<span>
[
<a href="#">功能</a>
]
</span>
<a href="#">
橱窗规则升级啦
</a>
</li>
<li>
<span>
[
<a href="#">话题</a>
]
</span>
<a href="#">
又爱又恨优惠劵
</a>
</li>
<li>
<span>
[
<a href="#">工具</a>
]
</span>
<a href="#">
购后送店铺红
</a>
</li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li>
<a href="#">
个人重要信息要管牢！
</a>
</li>
<li>
<a href="#">
卖家防范红包欺诈提醒
</a>
</li>
<li>
<a href="#">
更换收货地址的陷阱！
</a>
</li>
<li>
<a href="#">
注意骗子的技术升级了！
</a>
</li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li>
<a href="#">
走进无声课堂
</a>
</li>
<li>
<a href="#">
淘宝之行大众评审赢公益金
</a>
</li>
<li>
<a href="#">
爱心品牌联合征集
</a>
</li>
<li>
<a href="#">
名公益机构淘宝开店攻略
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
Js 中关于注册表单,使用onsubmit进行拦截提交，并判断用户填写的内容是否正确
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="descripti
js中关于导航切换效果-之二(使用定时器自动切换)
<!doctype html> <html lang="'en"> <head><meta charset="UTF-8"><title>Tab切換