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

最新推荐文章于 2024-03-09 17:27:05 发布

原创最新推荐文章于 2024-03-09 17:27:05 发布 · 688 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jsp #link #html #css

JavaScript 同时被 2 个专栏收录

18 篇文章

订阅专栏

CSS

8 篇文章

订阅专栏

本文介绍了使用JavaScript在非超链接元素上实现鼠标点击时样式切换的方法，通过修改类名来实现在页面上的动态样式变化。

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>