首先我們在HTML部分定義網(wǎng)頁選項(xiàng)卡中的內(nèi)容。

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

            
new1
            
new2
            
new3
          
        
        

          

            
new4
            
new5
            
new6
          
        
        

          

            
new7
            
new8
            
new9
          
        
        

          

            
new10
            
new11
            
new12
          
        
          

          

            
new13
            
new14
            
new15
          
        
      
    

CSS部分對HTML中的內(nèi)容進(jìn)行修飾：

      *{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語句中的第一個(gè)for循環(huán)是為了取得所有的選項(xiàng)卡中的點(diǎn)擊部分；因?yàn)镮這個(gè)變量在下面的事件函數(shù)中無法訪問到，所以每次點(diǎn)擊時(shí)，i變量循環(huán)到oli.length值。因此將i的值交給一個(gè)我們自定義的元素屬性上來保存循環(huán)中i的值，供下面使用。即：oli[i]._index=i;

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

以下是運(yùn)行的結(jié)果：

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

方法二：

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

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

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

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

  
    
    
    
    
  
  
    
      

        tab1
        
tab2
        
tab3
      
      內(nèi)容1
      內(nèi)容2
      內(nèi)容3
    
    
      

        tab1
        
tab2
        
tab3
      
      內(nèi)容1
      內(nèi)容2
      內(nèi)容3
    
    
        

        tab1
        
tab2
        
tab3
      
      內(nèi)容1
      內(nèi)容2
      內(nèi)容3
    
      
        

        tab1
        
tab2
        
tab3
      
      內(nèi)容1
      內(nèi)容2
      內(nèi)容3
    
  

和方法一相似先寫HTML里的內(nèi)容，CSS部分對HTML進(jìn)行修飾，我們直接來看JS部分；

看完上述內(nèi)容，你們對利用JavaScript怎么在網(wǎng)頁中實(shí)現(xiàn)一個(gè)選項(xiàng)卡功能有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。