延迟Tab切换，使用css中的flex布局，原生js实现。（京东首页菜单也有此延迟功能哦！）
每天进步一丢丢~~
1、延迟Tab切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>延迟菜单</title> <style> * { padding: 0; margin: 0; font-size: 14px; } li { list-style: none; } a { text-decoration: none; } .container { 1000px; height: 600px; margin: 0 auto; border: thin solid #000; overflow: hidden; } .container .nav { 100%; height: 40px; line-height: 40px; } .container .nav ul { display: flex; flex-flow: row nowrap; justify-content: space-around; background: #2b2b2b; } .container .nav ul li { 200px; border-right: thin solid #ddd; text-align: center; } .container .nav ul li:last-child { border-right: none; } .container .nav li a { color: #fff; display: inline-block; 200px; height: 40px; } .active { background: rgb(99, 3, 3);; } </style> </head> <body> <div class="container"> <div class="nav"> <ul id="list"> <li class="active"><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 class="content" id="content"> <div class="mode">首页</div> <div class="mode" style="display: none;">年度旅游</div> <div class="mode" style="display: none;">通知公告</div> <div class="mode" style="display: none;">企业文化</div> <div class="mode" style="display: none;">联系我们</div> </div> </div> <script> window.onload = function(){ var lis = $id('list').getElementsByTagName('li'); var modes = $id('content').getElementsByClassName('mode'); var timer = null; if(lis.length !== modes.length){ return; } for(var i=0; i<lis.length; i++){ lis[i].id = i; lis[i].onmouseover = function(){ var that = this; if(timer){ clearTimeout(timer); timer = null; } timer = setTimeout(function(){ for(var j=0; j<lis.length; j++){ lis[j].className = ''; modes[j].style.display = 'none'; } lis[that.id].className = 'active'; modes[that.id].style.display = 'block'; }, 500); }; } }; function $id(id){ return typeof id === 'string' ? document.getElementById(id) : id; } </script> </body> </html>
2、自动Tab切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自动切换tab</title> <style> * { padding: 0; margin: 0; } li { list-style: none; } a { text-decoration: none; color: #fff; } .container { 1000px; height: 360px; margin: 0 auto; border: thin solid #d5d5d5; } .container .nav { 100%; height: 40px; line-height: 40px; background: #2b2b2b; } .container .nav ul { display: flex; flex-flow: row nowrap; justify-content: space-around; } .container .nav ul li { border-right: thin solid #eee; 199px; text-align: center; } .container .nav ul li:last-child { border-right: none; } .container .nav ul li a { display: inline-block; 100%; } .content { height: 320px; line-height: 320px; text-align: center; font-size: 22px; font-weight: 700; } .active { background: rgba(121, 16, 24, 0.93); } </style> </head> <body> <div class="container"> <div class="nav"> <ul id="list"> <li class="active"><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 class="content" id="content"> <div class="mode">整装设计</div> <div class="mode" style="display: none;">家具馆</div> <div class="mode" style="display: none;">建材馆</div> <div class="mode" style="display: none;">灯饰馆</div> <div class="mode" style="display: none;">定制馆</div> </div> </div> <script> window.onload = function(){ var lis = $id('list').getElementsByTagName('li'); var modes = $id('content').getElementsByClassName('mode'); var timer = null; var index = 0; if(lis.length !== modes.length){ return; } changeIndex(); for(var j=0; j<lis.length; j++){ lis[j].id = j;
//鼠标移入时，清除定时器，当前盒子高亮 lis[j].onmouseover = function(){ clearInterval(timer); box(this.id); };
//鼠标移出时，启动定时器，继续自动切换盒子 lis[j].onmouseout = function(){ changeIndex(); }; } function changeIndex(){ timer = setInterval(function(){ index ++; if(index >= lis.length){ index = 0; } box(index); },2000); } function box(currentIndex){ for(var k=0; k<lis.length; k++){ lis[k].className = ''; modes[k].style.display = 'none'; } lis[currentIndex].className = 'active'; modes[currentIndex].style.display = 'block';
//重置索引为鼠标移入时的盒子 index = currentIndex; } }; function $id(id){ return typeof id === 'string' ? document.getElementById(id) : id; } </script> </body> </html>