日期:2014-05-16  浏览次数:20412 次

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

js:

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


css:

<style>
.titlelink,.titlelink_copy{
color:#000000;
text-decoration:none;
border:1px #bce87d solid;
padding:2px 2px 1px 2px;
font-weight:bold;
font-size:16px
}

.titlelink{background:#f8f8f8;}
.titlelink_copy{background:#bce87d;}
</style>
<div id="mylink">
<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>
</div>