最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

  
    
    
    
      *{margin: 0;padding: 0;}
      #box{width: 600px;background: #ccc;margin: 0 auto;}
      li{list-style: none;}
      #ul1{display: block; width: 100%;overflow: hidden;}
      #ul1 li{width:110px;height: 40px;background: #4cfed2;float: left;margin-left: 8px;text-align: center;line-height: 40px;}
      #content{width: 100%;margin-top: 20px;}
      #content div{display: none;}
      #content div.active{display: block;}
      .show{background: red;}
    
  
  
    
      
        
首頁
        
產(chǎn)品
        
新聞
        
聯(lián)系
        
我的
      
      
        
          

            
new1
            
new2
            
new3
          
        

      
        
首頁
        
產(chǎn)品
        
新聞
        
聯(lián)系
        
我的
      
       
        
          

            
new1
            
new2
            
new3
          
        

CSS部分對HTML中的內容進行修飾：

      *{margin: 0;padding: 0;}
      #box{width: 600px;background: #ccc;margin: 0 auto;}
      li{list-style: none;}
      #ul1{display: block; width: 100%;overflow: hidden;}
      #ul1 li{width:110px;height: 40px;background: #4cfed2;float: left;margin-left: 8px;text-align: center;line-height: 40px;}
      #content{width: 100%;margin-top: 20px;}
      #content div{display: none;}
      #content div.active{display: block;}
      .show{background: red;}
    

最后是最重要的js部分：

      window.onload=function(){
        var oli=document.getElementById("ul1").getElementsByTagName("li");
        //alert(oli.length);
        var odiv=document.getElementById("content").getElementsByTagName("div");//提取HTML中的元素
        //alert(odiv.length)
        for(var i=0;i

JS語句中的第一個for循環(huán)是為了取得所有的選項卡中的點擊部分；因為I這個變量在下面的事件函數(shù)中無法訪問到，所以每次點擊時，i變量循環(huán)到oli.length值。因此將i的值交給一個我們自定義的元素屬性上來保存循環(huán)中i的值，供下面使用。即：oli[i]._index=i;

添加點擊函數(shù)后，第二個for循環(huán)是為了把所有的oli的className改為“空”和所有的odiv的style為display='none'；循環(huán)結束后，在給當前點擊的這個oli添加className和下面相應的odiv的style為display='block';

以下是運行的結果：

在編寫程序時一定要注意，選項卡中的點擊部分即：li的數(shù)量（JS里oli.length）要和下面ID為content的div里包含的div數(shù)量（JS里odiv.length）相同，我在編寫程序時就因為oli.length與odiv.length不相等，導致程序報錯，但是好長時間都找不到錯誤；總而言之還是要多多細心。

方法二：

方法一適用于選項卡比較少的情況，但如果選項卡內容較多時我們要用到這種方法，第二種方法運用到了這周我們老師講的一個在JS種比較重要的知識點：自運行函數(shù)

(function a(){
  //函數(shù)里的內容      
      })(參數(shù));

定義函數(shù)a();給整個函數(shù)帶上括號，后面的括號為輸入?yún)?shù)；

以下為方法二自運行函數(shù)的程序：

  
    
    
    
    
  
  
    
      

        tab1
        
tab2
        
tab3
      
      內容1