js点击当前链接背景变色其他链接恢复原来背景色_js 点击链接单元格背景颜色变了-CSDN博客

可能大家都见过这样的效果，点击一个链接背景会变色，当再点击其他链接的时候，之前被点击的链接背景颜色又会恢复。下面就通过代码实例介绍一下如何实现此效果。
代码如下:
     
     
      
      
       
       [HTML] 
       
       纯文本查看 
       
       复制代码
       
       运行代码
      
      
      
      
       
       
        
         
            
              01 
             
            
              02 
             
            
              03 
             
            
              04 
             
            
              05 
             
            
              06 
             
            
              07 
             
            
              08 
             
            
              09 
             
            
              10 
             
            
              11 
             
            
              12 
             
            
              13 
             
            
              14 
             
            
              15 
             
            
              16 
             
            
              17 
             
            
              18 
             
            
              19 
             
            
              20 
             
            
              21 
             
            
              22 
             
            
              23 
             
            
              24 
             
            
              25 
             
            
              26 
             
            
              27 
             
            
              28 
             
            
              29 
             
            
              30 
             
            
              31 
             
            
              32 
             
            
              33 
             
            
              34 
             
            
              35 
             
            
              36 
             
            
              37 
             
            
              38 
             
            
              39 
             
            
              40 
             
            
              41 
             
            
              42 
             
            
              43 
             
            
              44 
             
            
              45 
             
            
              46 
             
            
              47 
             
            
              48 
             
             
              
              <!DOCTYPE html> 
              
              
              < 
              html 
              > 
              
              
              < 
              head 
              > 
              
              
              < 
              meta  
              charset 
              = 
              "utf-8" 
              > 
              
              
              < 
              title 
              >链接背景变色</ 
              title 
              > 
              
              
              < 
              style  
              type 
              = 
              "text/css" 
              > 
              
              
              ul{list-style:none;} 
              
              
              li,a{ 
              
              
                 
              width:150px; 
              
              
                 
              height:30px; 
              
              
                 
              text-align:center; 
              
              
                 
              line-height:30px; 
              
              
                 
              margin-bottom:10px; 
              
              
                 
              background-color:#606; 
              
              
                 
              color:white; 
              
              
                 
              display:block; 
              
              
              } 
              
              
              a{text-decoration:none;} 
              
              
              </ 
              style 
              > 
              
              
              < 
              script  
              type 
              = 
              "text/javascript" 
              > 
              
              
              function changeCss(obj,lis){  
              
              
                 
              for(var i=0;i< 
              lis.length 
              ;i++){  
              
              
                   
              lis[i].style.backgroundColor = "#606"; 
              
              
                 
              }  
              
              
                 
              obj.style.backgroundColor 
              = 
              "#F30" 
              ; 
              
              
              }  
              
              
              window.onload 
              = 
              function 
              (){ 
              
              
                 
              var  
              box 
              = 
              document 
              .getElementById("box"); 
              
              
                 
              alinks 
              = 
              box 
              .getElementsByTagName("a"); 
              
              
                 
              for(var  
              i 
              = 
              0 
              ;i<alinks.length;i++){ 
              
              
                   
              alinks[i] 
              .onclick 
              = 
              function 
              (){ 
              
              
                      
              changeCss(this,alinks) 
              
              
                   
              } 
              
              
                 
              } 
              
              
              } 
              
              
              </script> 
              
              
              </ 
              head 
              > 
              
              
              < 
              body 
              > 
              
              
              < 
              ul  
              id 
              = 
              "box" 
              > 
              
              
                 
              < 
              li 
              >< 
              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 
              > 
              
              
              </ 
              body 
              > 
              
              
              </ 
              html 
              >