js实现鼠标点击（非a:hover,a:link,a:visited,a:active）的样式切换效果

feiyang10086

js实现鼠标点击（非a:hover,a:link,a:visited,a:active）的样式切换效果

js实现鼠标点击（非a:hover,a:link,a:visited,a:active）的样式切换效果

js:




Js代码

1. 1.function changeBg(link)  
   
2. 2.{  
   
3. 3.var alllinks=document.getElementById("mylink").getElementsByTagName("a");  
   
4. 4.for(var i=0;i<alllinks.length;i++){  
   
5. 5.   alllinks[i].className="titlelink";//默认未点击时引用的样式  
   
6. 6.}  
   
7. 7.link.className="titlelink_copy";//点击切换样式  
   
8. 8.}  
   

复制代码

css:




Html代码

1. 1.<style>  
   
2. 2..titlelink,.titlelink_copy{  
   
3. 3.color:#000000;  
   
4. 4.text-decoration:none;  
   
5. 5.border:1px #bce87d solid;  
   
6. 6.padding:2px 2px 1px 2px;  
   
7. 7.font-weight:bold;  
   
8. 8.font-size:16px  
   
9. 9.}  
   
10. 10.  
    
11. 11..titlelink{background:#f8f8f8;}  
    
12. 12..titlelink_copy{background:#bce87d;}  
    
13. 13.</style>  
    
14. 14.<div id="mylink">  
    
15. 15.<a href="radiostat.jsp" class="titlelink" onclick="changeBg(this)">AAAA</a><a href="radioappstat.jsp" class="titlelink" onclick="changeBg(this)">BBBB</a><a href="radioactidstat.jsp" class="titlelink" onclick="changeBg(this)">CCCC</a><a href="radiotopstat.jsp" class="titlelink" onclick="changeBg(this)">DDDD</a>  
    
16. 16.</div>  

复制代码

清风鸟儿

谢谢分享