try.html
<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<title></title> ???<link rel="stylesheet" type="text/css" href="try.css"> ???<script type="text/javascript" src="try.js"></script></head><body><div id="notice" class="notice"> ???<div class="notice-tit" id="notice-tit"> ???????<ul> ???????????<li><a href="#">公告</a></li> ???????????<li><a href="#">规则</a></li> ???????????<li><a href="#">论坛</a></li> ???????????<li><a href="#">安全</a></li> ???????????<li class="select"><a href="#">公益</a></li> ???????</ul> ???</div> ???<div id="notice-con" class="notice-con"> ???????<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><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: block;"> ???????????<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>
try.css
*{ ???margin: 0; ???padding:0; ???list-style: none; ???font-size: 12px;}.notice{ ???width: 298px; ???height: 98px; ???margin: 10px; ???border: 1px solid #eee; ???overflow: hidden;}.notice-tit{ ???height: 27px; ???position: relative; ???background-color: #f7f7f7;}.notice-tit ul{ ???position: absolute; ???width: 301px; ???left: -1px;}.notice-tit ul li{ ???float: left; ???width: 58px; ???height: 26px; ???text-align: center; ???line-height: 26px; ???overflow: hidden; ???padding: 0 1px; ???background: #f7f7f7; ???border-bottom: 1px solid #eee;}.notice-tit ul li.select{ ???background: #fff; ???border-bottom-color: #fff; ???border-left: 1px solid #eee; ???border-right: 1px solid #eee; ???padding: 0; ???font-weight: bolder;}.notice li a:link,.notice-tit li a:visited{ ???text-decoration: none; ???color: #000;}.notice li a:hover{ ???color: #f90;}.notice-con .mod{ ???margin: 10px 10px 10px 19px;}.notice-con .mod ul li{ ???float: left; ???width: 134px; ???height: 25px; ???overflow: hidden;}try.js
function $(id){ ???return typeof id===‘string‘?document.getElementById(id):id;}window.onload = function(){ ???var index=0; ???var timer=null; ???//获取鼠标滑过或点击的标签和要切换内容的元素 ???var titles = $(‘notice-tit‘).getElementsByTagName(‘li‘); ???var divs ?=$(‘notice-con‘).getElementsByTagName(‘div‘); ???// alert(divs.length); ???if(titles.length!=divs.length) ???????return; ???for(var i=0;i<titles.length;i++){ ???????titles[i].id=i; ???????titles[i].onmouseover=function(){ ???????????// 用that这个变量来引用当前滑过的li ???????????var that=this; ???????????// 如果存在准备执行的定时器，立刻清除，只有当前停留时间大于500ms时才开始执行 ???????????if(timer){ ???????????????clearTimeout(timer); ???????????????timer=null; ???????????} ???????????// 延迟半秒执行 ???????????timer=window.setTimeout(function(){ ???????????????for(var j=0;j<titles.length;j++){ ???????????????????titles[j].className=‘‘; ???????????????????divs[j].style.display=‘none‘; ???????????????} ???????????????titles[that.id].className=‘select‘; ???????????????divs[that.id].style.display=‘block‘; ???????????},500); ???????} ???}}效果：
2017-09-05 20:32:11
Tab选项卡 ??延迟切换效果js实现
原文地址：http://www.cnblogs.com/guangzhou11/p/7481824.html