1.鼠标移入移出切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab切换</title> <style type="text/css"> * {padding: 0;margin: 0;} li {list-style: none;} .wrapper { margin: 0 auto; width: 100%; max-width: 1140px; } .tabbox { margin: 40px auto; width: 400px; height: 200px; border: 1px solid #f70; overflow: hidden; } .tabbox .tab-tit{ position: relative; height: 40px; } ul { position: absolute; left: -1px; width: 401px; height: 40px; line-height: 40px; background-color: #eaeaea; } ul li { float: left; border-left: 1px solid #f70; border-bottom: 1px solid #f70; text-align: center; width: 99px; height: 40px; overflow: hidden; } .clear {clear: both;} .select { padding-right: 1px; border-bottom: none; background-color: #fff; } a:link, a:visited { font-size: 16px; font-weight: bold; color: #888; text-decoration: none; } .select a { color: #333; } a:hover, a:active { color: #f20; font-weight: bold; } .tab-txt { width: 400px; padding: 40px; overflow: hidden; } .demo {display: none;} .tab-txt p { line-height: 40px; } </style> </head> <body> <div> <div> <div> <ul> <li><a href="javascript:;">女枪</a></li> <li><a href="javascript:;">提莫</a></li> <li><a href="javascript:;">盖伦</a></li> <li><a href="javascript:;">剑圣</a></li> </ul> </div> <!-- <div></div> --> <div> <div> <p>我有两把枪，一把叫射，另一把叫，啊~</p> <p>你有一双迷人的眼睛，我非常喜欢！</p> </div> <div> <p>我去前面探探路</p> <p>提莫队长正在待命！</p> </div> <div> <p>放马过来吧，你会死的很光荣的！</p> <p>快点儿结束吧，我头有点儿转晕了……</p> </div> <div> <p>我的剑就是你的剑。</p> <p>眼睛多，看东西才会更加清楚</p> </div> </div> </div> </div> <script type="text/javascript"> function $(id) { return typeof id === "string" ? document.getElementById(id) : id; } window.onload = function() { var tits = $("tabTit").getElementsByTagName("li"); var txts = $("tabTxt").getElementsByClassName("demo"); if(tits.length != txts.length) {return;} for(var i=0,l=tits.length; i<l; i++) { tits[i].id = i; tits[i].onmouseover = function() { for(var j=0; j<l; j++) { tits[j].className = ""; txts[j].style.display = "none"; } this.className = "select"; txts[this.id].style.display = "block"; } } } </script> </body> </html>
2.鼠标移入移出延时切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab切换之延时切换</title> <style type="text/css"> * {padding: 0;margin: 0;} li {list-style: none;} .wrapper { margin: 0 auto; width: 100%; max-width: 1140px; } .tabbox { margin: 40px auto; width: 400px; height: 200px; border: 1px solid #f70; overflow: hidden; } .tabbox .tab-tit{ position: relative; height: 40px; } ul { position: absolute; left: -1px; width: 401px; height: 40px; line-height: 40px; background-color: #eaeaea; } ul li { float: left; border-left: 1px solid #f70; border-bottom: 1px solid #f70; text-align: center; width: 99px; height: 40px; overflow: hidden; } .clear {clear: both;} .select { padding-right: 1px; border-bottom: none; background-color: #fff; } a:link, a:visited { font-size: 16px; font-weight: bold; color: #888; text-decoration: none; } .select a { color: #333; } a:hover, a:active { color: #f20; font-weight: bold; } .tab-txt { width: 400px; padding: 40px; overflow: hidden; } .demo {display: none;} .tab-txt p { line-height: 40px; } </style> </head> <body> <div> <div> <div> <ul> <li><a href="javascript:;">女枪</a></li> <li><a href="javascript:;">提莫</a></li> <li><a href="javascript:;">盖伦</a></li> <li><a href="javascript:;">剑圣</a></li> </ul> </div> <!-- <div></div> --> <div> <div> <p>我有两把枪，一把叫射，另一把叫，啊~</p> <p>你有一双迷人的眼睛，我非常喜欢！</p> </div> <div> <p>我去前面探探路</p> <p>提莫队长正在待命！</p> </div> <div> <p>放马过来吧，你会死的很光荣的！</p> <p>快点儿结束吧，我头有点儿转晕了……</p> </div> <div> <p>我的剑就是你的剑。</p> <p>眼睛多，看东西才会更加清楚</p> </div> </div> </div> </div> <script type="text/javascript"> function $(id) { return typeof id === "string" ? document.getElementById(id) : id; } window.onload = function() { var timer = null; var tits = $("tabTit").getElementsByTagName("li"); var txts = $("tabTxt").getElementsByClassName("demo"); if(tits.length != txts.length) {return;} for(var i=0,l=tits.length; i<l; i++) { tits[i].id = i; tits[i].onmouseover = function() { var that = this; if(timer) { clearTimeout(timer); timer = null; } timer = setTimeout(function() { for(var j=0; j<l; j++) { tits[j].className = ""; txts[j].style.display = "none"; } that.className = "select"; txts[that.id].style.display = "block"; },500); } } } </script> </body> </html>
3. tab自动切换，鼠标移入移出立即切换