`
zpball
  • 浏览: 917058 次
  • 性别: 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正确顺序

    这些伪类选择器包括a:link、a:visited、a:hover和a:active,它们分别对应链接的四个不同状态:未访问链接、已访问链接、鼠标悬停状态、鼠标激活状态。这四个伪类选择器按照特定顺序定义时,需遵循一个被称为“爱恨...

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

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

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

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

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

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

    轻松使用标签

    例如,如果`a:hover`被写在`a:visited`之前,那么已访问过的链接在鼠标悬停时可能不会显示预期的`a:hover`样式。 #### 示例代码 为了更好地理解这一顺序,以下是一个简单的CSS示例: ```css a { font-size: 16px...

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

    a标签代表超链接,它具有四种不同的伪类状态,这些状态分别对应于链接的不同交互阶段,形成了一个特殊的状态顺序,即所谓的LVHA顺序:Link(未访问状态)、Visited(已访问状态)、Hover(鼠标悬停状态)、Active...

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

    例如,用户首先看到的是未访问的链接(`a:link`),然后鼠标移动到链接上(`a:hover`),接着用户点击(`a:active`),最后链接变为已访问(`a:visited`)。 4. **特殊情况**: - `a:active` 的一个特性是它始终会...

    Css——超链接样式

    例如,如果将`a:visited`放在`a:link`之前,那么未访问的链接将无法应用到初始样式,因为`visited`状态优先级更高。 超链接的这四种状态提供了一种强大的工具来实现动态的用户体验。通过调整这些状态的样式,我们...

    仿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:A标记样式

    **CSS:A标记样式详解** 在Web开发中,CSS(Cascading Style Sheets)是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。A标记,即`&lt;a&gt;`标签,是HTML中的超链接元素,用于创建链接到...

    A样式小总结 经常要用到的A的样式

    CSS中的伪类选择器可以用来指定链接的不同状态,如未访问(`:link`)、已访问(`:visited`)、鼠标悬停(`:hover`)和活动状态(`:active`): ```css a:link { color: #0000FF; } a:visited { color: #...

    去掉的下划线与设置的颜色

    ### 去掉 `&lt;a&gt;` 的下划线与设置 `&lt;a&gt;` 的颜色 在网页设计中,对 `&lt;a&gt;` 标签进行样式调整是常见需求之一。本文将详细介绍如何通过 CSS(层叠样式表)去除 `&lt;a&gt;` 标签默认的下划线,并统一设置页面内所有 `&lt;a&gt;` 标签...

    a标签样式 和 a标签属性 .docx

    ### A标签样式详解 在网页设计中,A标签(即`&lt;a&gt;`标签)作为超链接的主要载体,其样式的设计对于提升用户体验具有重要意义。通过CSS(层叠样式表),我们可以为A标签设置丰富的样式,特别是在处理不同状态下的链接...

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

    这种组合使用称为“链路状态顺序”或“LVHA 规则”,即 Link - Visited - Hover - Active。例如: ```css a { color: inherit; text-decoration: none; } a:link, a:visited { color: blue; } a:hover { color...

    js树代码 css样式实现

    本文档介绍了一个简单的使用JavaScript(简称JS)和级联样式表(简称CSS)来实现树形菜单的方法。 #### 二、JavaScript部分 1. **函数`hideAll()`**: - **功能**:隐藏所有子菜单。 - **实现原理**:通过遍历...

    有关于a标签的4个伪类的使用方法

    而`a`标签的四个伪类选择器——`:link`, `:visited`, `:hover`, 和 `:active`,则提供了对链接不同状态的样式控制,帮助我们实现更加丰富的用户体验。以下是对这四个伪类的详细解释和使用方法: 1. **`:link`**:这...

    伪类选择器的使用和语法

    1. 顺序非常重要,例如,a:link、a:visited、a:hover 和 a:active 的顺序不能更换。 2. 伪类选择器可以和其他选择器结合使用,例如,div a:hover { color: green; }。 伪类选择器是一种非常有用的选择器,可以实现...

Global site tag (gtag.js) - Google Analytics