编程 Javascript

JS 实现点击a标签的时候让其背景更换

Posted in Javascript onOctober 15, 2013

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<script type=text/javascript src="alabel.js"></script> 
<style type="text/css"> 
.curr{background:blue;display:inline;} 
</style> </head> 
<body> 
<div class="clMenu"> 
<span><a href="#">1</a></span> 
</div> 
</body> 
</html>

在alabel.js中：

window.onload = function () 
{ 
var aspan = document.getElementsByTagName("span"); 
var i = 0; 
for (i = 0; i < aspan.length; i++) 
{ 
aspan[i].onclick = function () 
{ 
for (i = 0; i < aspan.length; i++) aspan[i].className = ""; 
this.className = "curr"; 
}; 
} 
};

这样就可以实现在点击a标签的时候给其添加红色的背景。

注意：curr的属性中display不能是block，否则添加的背景是一整行。

JS 实现点击a标签的时候让其背景更换

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript 学习小结(适合新手参考)

Jul 30 Javascript

javascript转换字符串为dom对象（字符串动态创建dom）

May 10 Javascript

javascript函数中的arguments参数

Aug 01 Javascript

jQuery中:first-child选择器用法实例

Dec 31 Javascript

jQuery实现返回顶部效果的方法

May 29 Javascript

javascript实现鼠标放上后下边对应内容变换的效果

Aug 06 Javascript

12种JavaScript常用的MVC框架比较分析

Nov 16 Javascript

深究AngularJS之ui-router详解

Jun 13 Javascript

layui操作列按钮个数和文字颜色的判断实例

Sep 11 Javascript

原生js实现无缝轮播图

Jan 11 Javascript

JS自定义右键菜单实现代码解析

Jul 16 Javascript

Vue3中的Refs和Ref详情

Nov 11 Vue.js

JS操作Cookies的小例子

Oct 15 #Javascript

如何在父窗口中得知window.open()出的子窗口关闭事件

Oct 15 #Javascript

JavaScript中prototype为对象添加属性的误区介绍

Oct 15 #Javascript

JS格式化数字保留两位小数点示例代码

Oct 15 #Javascript

js计算字符串长度包含的中文是utf8格式

Oct 15 #Javascript

Javascript中查找不以XX字符结尾的单词示例代码

Oct 15 #Javascript

通过js获取div的background-image属性

Oct 15 #Javascript