这一章讲述如何实现Tab的切换功能
关于Tab切换功能可以从四个方面来讲
鼠标移动到上面就切换，点击切换，自动切换，延迟切换，既可以手动切换同时也自动切换。
首先html文件准备
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TAB切换</title> <link href="index.css" type="text/css" rel="stylesheet"/> <script src="index6.js" type="text/javascript"></script> </head> <body> <div class="notice" id="notice"> <div class="notice-top" id="notice-top"> <ul class="notice-list" id="notice-list"> <li class="show"><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="notice-content" id="notice-content"> <div class="content-show"> <ul> <li>这是内容一：信息</li> <li>这是内容一：信息</li> <li>这是内容一：信息</li> <li>这是内容一：信息</li> </ul> </div> <div> <ul> <li>这是内容二：通知</li> <li>这是内容二：通知</li> <li>这是内容二：通知</li> <li>这是内容二：通知</li> </ul> </div> <div> <ul> <li>这是内容三：简历</li> <li>这是内容三：简历</li> <li>这是内容三：简历</li> <li>这是内容三：简历</li> </ul> </div> <div> <ul> <li>这是内容四：新闻</li> <li>这是内容四：新闻</li> <li>这是内容四：新闻</li> <li>这是内容四：新闻</li> </ul> </div> <div> <ul> <li>这是内容五：知知</li> <li>这是内容五：知知</li> <li>这是内容五：知知</li> <li>这是内容五：知知</li> </ul> </div> </div> </div> </body> </html>
css文件
@charset "utf-8"; /* CSS Document */ *{ margin:0; padding:0; font-size:14px; } .notice{ width:298px; height:98px; margin:10px auto; border:1px solid #7d7d7d; } .notice-top{ width:298px; height:27px; position:relative; background-color:#7d7d7d; } .notice-list{ position:absolute; left:-1px; width:300px; height:27px; list-style-type:none; } .notice-list li{ float:left; width:58px; height:26px; line-height:26px; text-align:center; padding:0 1px; border-bottom:1px solid #7d7d7d; } .notice-list li a{ color:#f0f0f0; text-decoration:none; } .notice-list .show{ border-bottom:1px solid #FFF; background-color:#FFF; padding:0px; height:26px; border-left:1px solid #7d7d7d; border-right:1px solid #7d7d7d; } .notice-list .show a{ color:#000; text-decoration:none; } .notice-content{ width:298px; height:71px; } .notice-content ul{ list-style-type:none; } .notice-content div{ display:none; } .notice-content .content-show{ display:block; }
//这个地方如果直接写成.content-show{}貌似有点问题。
.notice-content ul li{ float:left; width:134px; margin:10px 0 10px 10px; font-size:12px; }
index.js实现移到上面就切换
window.onload = function(){ var noticelist =document.getElementById("notice-list"); var listArray=noticelist.getElementsByTagName("li"); var noticeContent =document.getElementById("notice-content"); var listContent= noticeContent.getElementsByTagName("div"); for(var k=0;k<listArray.length;k++){ listArray[k].id=k; } for(var i=0;i<listArray.length;i++){ listArray[i].onmouseover=function(){
// var xurDiv =listContent[i];这句话是错误的，原因在于在这个函数里面是取不到外面定义的i的 var curDiv=listContent[this.id];//这里千万不要写成['this.id']; for(var j=0;j<listArray.length;j++){ listArray[j].className=""; listContent[j].className=""; } this.className="show"; curDiv.className="content-show"; } } }
index2.js点击切换
// JavaScript Document window.onload = function(){ var noticelist =document.getElementById("notice-list"); var listArray=noticelist.getElementsByTagName("li"); var noticeContent =document.getElementById("notice-content"); var listContent= noticeContent.getElementsByTagName("div"); for(var k=0;k<listArray.length;k++){ listArray[k].id=k; } for(var i=0;i<listArray.length;i++){ listArray[i].onclick=function(){ var curDiv=listContent[this.id]; for(var j=0;j<listArray.length;j++){ listArray[j].className=""; listContent[j].className=""; } this.className="show"; curDiv.className="content-show"; } } }
index3.js延迟切换
// JavaScript Document window.onload = function(){ var noticelist =document.getElementById("notice-list"); var listArray=noticelist.getElementsByTagName("li"); var noticeContent =document.getElementById("notice-content"); var listContent= noticeContent.getElementsByTagName("div"); for(var k=0;k<listArray.length;k++){ listArray[k].id=k; } for(var i=0;i<listArray.length;i++){ listArray[i].onmouseover=function(){ var that=this;//这一步很重要，千万不能省略掉 setTimeout(function(){ var curDiv=listContent[that.id];//这里面是用不到this的，所以要在外面定义一个that变量。 for(var j=0;j<listArray.length;j++){ listArray[j].className=""; listContent[j].className=""; } that.className="show"; curDiv.className="content-show"; },500); } } }
index4.js自动切换
// JavaScript Document // JavaScript Document window.onload = function(){ var noticelist =document.getElementById("notice-list"); var listArray=noticelist.getElementsByTagName("li"); var noticeContent =document.getElementById("notice-content"); var listContent= noticeContent.getElementsByTagName("div"); var index=0; for(var k=0;k<listArray.length;k++){ listArray[k].id=k; } function changeText(){ //console.log(listArray.length); console.log(index); for(var i=0;i<listArray.length;i++){ listArray[i].className=""; listContent[i].className=""; } listArray[index].className="show"; listContent[index].className="content-show"; index++; index=index%listArray.length; setTimeout(changeText,2000); } changeText(); }
index5.js既可以实现手动切换，又可以实现自动切换
// JavaScript Document window.onload = function(){ var noticelist =document.getElementById("notice-list"); var listArray=noticelist.getElementsByTagName("li"); var noticeContent =document.getElementById("notice-content"); var listContent= noticeContent.getElementsByTagName("div"); var index=0; for(var k=0;k<listArray.length;k++){ listArray[k].id=k; } for(var i=0;i<listArray.length;i++){ listArray[i].onclick=function(){ var curDiv=listContent[this.id]; index=this.id; for(var j=0;j<listArray.length;j++){ listArray[j].className=""; listContent[j].className=""; } this.className="show"; curDiv.className="content-show"; } } function changeText(){ for(var i=0;i<listArray.length;i++){ listArray[i].className=""; listContent[i].className=""; } listArray[index].className="show"; listContent[index].className="content-show"; index++; index=index%listArray.length; setTimeout(changeText,1500); } changeText(); }
index6.js针对index5.js精简一下代码
// JavaScript Document // JavaScript Document window.onload = function(){ var noticelist =document.getElementById("notice-list"); var listArray=noticelist.getElementsByTagName("li"); var noticeContent =document.getElementById("notice-content"); var listContent= noticeContent.getElementsByTagName("div"); var index=0; for(var k=0;k<listArray.length;k++){ listArray[k].id=k; } for(var i=0;i<listArray.length;i++){ listArray[i].onclick=function(){ index=this.id; changeState(); } } function changeText(){ changeState(); index++; index=index%listArray.length; setTimeout(changeText,1500); } changeText(); function changeState(){ var curDiv=listContent[index]; for(var i=0;i<listArray.length;i++){ listArray[i].className=""; listContent[i].className=""; } listArray[index].className="show"; curDiv.className="content-show"; } }