Tab切换

这一章讲述如何实现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";
    }
    
}
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yuaima/p/5436593.html