几种tab切换详解

时间：2021-05-25

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 class="wrapper"> <div id="tabBox" class="tabbox"> <div id="tabTit" class="tab-tit"> <ul> <li class="select"><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 class="clear"></div> --> <div id="tabTxt" class="tab-txt"> <div class="demo" style="display: block;"> <p>我有两把枪，一把叫射，另一把叫，啊~</p> <p>你有一双迷人的眼睛，我非常喜欢！</p> </div> <div class="demo"> <p>我去前面探探路</p> <p>提莫队长正在待命！</p> </div> <div class="demo"> <p>放马过来吧，你会死的很光荣的！</p> <p>快点儿结束吧，我头有点儿转晕了……</p> </div> <div class="demo"> <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 class="wrapper"> <div id="tabBox" class="tabbox"> <div id="tabTit" class="tab-tit"> <ul> <li class="select"><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 class="clear"></div> --> <div id="tabTxt" class="tab-txt"> <div class="demo" style="display: block;"> <p>我有两把枪，一把叫射，另一把叫，啊~</p> <p>你有一双迷人的眼睛，我非常喜欢！</p> </div> <div class="demo"> <p>我去前面探探路</p> <p>提莫队长正在待命！</p> </div> <div class="demo"> <p>放马过来吧，你会死的很光荣的！</p> <p>快点儿结束吧，我头有点儿转晕了……</p> </div> <div class="demo"> <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自动切换，鼠标移入移出立即切换

<!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 class="wrapper"> <div id="tabBox" class="tabbox"> <div id="tabTit" class="tab-tit"> <ul> <li class="select"><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 class="clear"></div> --> <div id="tabTxt" class="tab-txt"> <div class="demo" style="display: block;"> <p>我有两把枪，一把叫射，另一把叫，啊~</p> <p>你有一双迷人的眼睛，我非常喜欢！</p> </div> <div class="demo"> <p>我去前面探探路</p> <p>提莫队长正在待命！</p> </div> <div class="demo"> <p>放马过来吧，你会死的很光荣的！</p> <p>快点儿结束吧，我头有点儿转晕了……</p> </div> <div class="demo"> <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 index = 0; 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() { clearInterval(timer); styleFun(this.id); } tits[i].onmouseout = function() { timer = setInterval(autoPlay, 2000); } } //在开启定时器的同时清楚定时器并置空 if(timer) { clearInterval(timer); timer = null; } timer = setInterval(autoPlay, 2000); function autoPlay() { index++; if(index >= tits.length) { index = 0; } styleFun(index); } function styleFun(ele) { for(var j=0,m=tits.length; j<m; j++) { tits[j].className = ""; txts[j].style.display = "none"; } tits[ele].className = "select"; txts[ele].style.display = "block"; //将鼠标移入移出时的index传给autoPlay; index = ele; } } </script></body></html>

4. 广告栏切换实例

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; list-style: none; } .wrap { height: 170px; width: 490px; margin: 20px auto; overflow: hidden; position: relative; margin: 100px auto; } .wrap ul { position: absolute; } .wrap ul li { height: 170px; } .wrap ol { position: absolute; right: 5px; bottom: 10px; } .wrap ol li { height: 20px; width: 20px; background: #ccc; border: solid 1px #666; margin-left: 5px; color: #000; float: left; line-height: center; text-align: center; cursor: pointer; } .wrap ol .on { background: #E97305; color: #fff; } </style> <script type="text/javascript"> window.onload = function() { var wrap = document.getElementById('wrap'), pic = document.getElementById('pic'), piclist = pic.getElementsByTagName('li'), list = document.getElementById('list').getElementsByTagName('li'), picheight = 170, index = 0, timer = null; if(piclist.length != list.length) { return; } // 定义并调用自动播放函数 if(timer) { clearInterval(timer); timer = null; } timer = setInterval(picFunc, 2000); function picFunc() { index++; if(index >= piclist.length) { index = 0; } changePic(index); } // 定义图片切换函数 function changePic(ele) { for(var j = 0, m = piclist.length; j < m; j++) { list[j].className = ""; } pic.style.top = -ele * picheight + "px"; list[ele].className = "on"; index = ele; } // 鼠标划过整个容器时停止自动播放 wrap.onmouseover = function() { clearInterval(timer); } // 鼠标离开整个容器时继续播放至下一张 wrap.onmouseout = function() { timer = setInterval(picFunc, 2000); } // 遍历所有数字导航实现划过切换至对应的图片 for(var i = 0, l = list.length; i < l; i++) { list[i].id = i; list[i].onmouseover = function() { changePic(this.id); } } } </script> </head> <body> <div class="wrap" id='wrap'> <ul id="pic"> <li><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li> <li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li> <li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li> <li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li> <li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li> </ul> <ol id="list"> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> </body></html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章