`
zpball
  • 浏览: 898066 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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>
分享到:
评论

相关推荐

    在CSS中定义a:link、a:visited、a:hover、a:active正确顺序

    以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面。出现一些问题,搜索引擎查了一些网站和资料,发现很多人问到这个问题,给出的... TEXT-DECORATION: none } A:visited { COLOR: #000000; TEXT-DE

    css通过伪类来设置超链接样式附示例

    css设置超链接样式是通过伪类来实现的 ...复制代码代码如下: a:link {} a:visited {} a:hover {} a:active {} 伪类名字对大小写不敏感,但在定义顺序上有要求。:hover必须被置于:link和:visited之后才

    a标签样式 和 a标签属性写法

    a标签样式 一组专门的预定义的类称为伪类,主要用来处理超链接的状态。超链接文字的状态可以通过伪类选择符+样式规则来控制。伪类选择符包括: 总: a 表示所有状态下的连接 ...④ a:hover:鼠标移到链接上时 ,如 .m

    a标签的四个css伪类(link、visited、hover、active)样式理解

    点击后再次点击a标签连接时:link、visited、hover、active 这个就是所有组合的样式了。 如果有多个同样的样式,后面的样式会覆盖前面的样式,所以这四个伪类的定义就有顺序的要求了, 而大家所说的‘lvha’

    HTML5&CSS3网页制作:链接伪类.pptx

    定义超链接时,为了提高用户体验,经常需要为超链接指定不同的状态,使得超链接在点击前、点击后和鼠标悬停时的样式不同。 a:link a:visited a:hover a:active 链接伪类 超链接标记&lt;a&gt;的伪类 含义 a:link{ CSS样式...

    仿MAC官网导航菜单样式源文件

    仿MAC官网导航菜单样式源文件 部分css &lt;!-- html,body { height:100%; background:#fff; } body { font:12px "宋体",Arial,sans-serif; color:#333; } body,form,menu,dir,fieldset,blockquote,p,pre,ul,ol,dl,dd,...

    CSS教程:vlink,alink,link和a:link

    伪类选择符包括:总: a 表示所有状态下的连接 如 .mycls a{color:red}① a:link:未访问链接 ,如 .mycls a:link {color:blue}② a:visited:已访问链接 ,如 .mycls a:visited{color:blue}③ a:active:激活时(链接...

    a标签的css样式四个状态LVHA的设计

    ④ a:hover:鼠标移到链接上时 ,如 a:hover {color:blue} 一般a:hover和a:visited链接的状态(颜色、下划线等)应该是相同的。 前三者分别对应body元素的link、vlink、alink这三个属性。 四个“状态”的先后过程...

    JAVASCRIPT学习资料

    A:hover {color: green} A:active {color: red;} a:link { text-decoration: none } a:acitve { text-decoration: none } a:visited { text-decoration: none } body { background-color:white;font-size: 16pt } ...

    期末作业网页制作

    a:link, a:visited { color: #f5ea01; text-decoration: none; font-weight: bold; } a:active, a:hover { color: #f5ea01; text-decoration: underline; } p { margin: 0px; padding: 0px; }

    ASP小程序编写的网页

    cssdemo.css样式表文件内容: .font_style { font-family: "宋体"; font-size: 24px; } body{ font-family:"宋体","Times New Roman"; background-color:#CCCCCC; } a:link{ text-decoration:none; } a:visited { ...

    Css——超链接样式

    css中关于超链接的四个属性一般正常顺序为:link,visited,hover,active,即: a:link 链接平常的状态 a:visited 链接被访问过之后 a:hover 鼠标放到链接上的时候 a:active 链接被按下的时候

    CSS中a标签样式的“爱恨”原则:定义链接样式的四个伪类

    CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”。其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是... a:active,定义鼠标点击链接时的样式。 示例: 复制代

    使用HTML开发商业网站-链接伪类控制超链接课件.pptx

    a:link,a:visited{ color:#FC0; text-decoration:none; /*清除超链接默认的下划线*/ margin-right:20px; } a:hover{ color:#0F0; text-decoration:underline; /*鼠标悬停时出现下划线*/ } a:active{ color:#F00;} ; ...

    设置链接颜色的伪类选择符的顺序为LVHA

    包括:link、:visited、:hover、:active,它们的声明是有一定顺序的,我们将这种顺序简称为L-V-H-A,即link最先,其次visited,之后hover,最后active,如此声明才能保证hover与active状态显示正确的样式。...

    有用代码改变链接字体和颜色

    网页制作中有用的添加背景图片代码,添加普通图片,该图片显示在涂鸦面板代码,如何加音乐,如何改变鼠标样式,独特的鼠标样式显示你独特的个性 ……改变链接字体和颜色 &lt;style type=text/css&gt; &lt;!-- A:link{COLOR: ...

    同一html页面中不同链接的不同样式的css代码

    a:visited 链接已经点击过的 a:hover 鼠标放在链接上未点击 a:active 是介于hover visited 之间的一个状态,可以说是链接被按下时候的状态 大家都知道想要设置统一的连接样式,只要在css文件中设置a:link,a:visited,...

    HTML设置超链接字体颜色和点击后的字体颜色

    其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是: :link :visited :hover :active 因为我们要定义链接样式,所以其中必不可少的就是超级链接中的锚标签–a,锚标签...

Global site tag (gtag.js) - Google Analytics