编程 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 相关文章推荐

再次更新！MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)

Feb 05 Javascript

JS URL传中文参数引发的乱码问题

Sep 02 Javascript

jquery 双色表格实现代码

Dec 08 Javascript

javascript jq 弹出层实例

Aug 25 Javascript

利用JavaScript实现新闻滚动效果(实例代码)

Nov 27 Javascript

邮箱下拉自动填充选择示例代码附图

Apr 03 Javascript

使用jquery prev()方法找到同级的前一个元素

Jul 11 Javascript

jQuery插件ajaxFileUpload实现异步上传文件效果

Apr 14 Javascript

JavaScript中的Math.LOG2E属性使用详解

Jun 14 Javascript

原生js实现新闻列表展开/收起全文功能

Jan 20 Javascript

微信小程序开发之实现自定义Toast弹框

Jun 08 Javascript

React中阻止事件冒泡的问题详析

Apr 12 Javascript

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

You might like

php对gzip文件或者字符串解压实例参考

2008/07/25 PHP

查找mysql字段中固定字符串并替换的几个方法

2012/09/23 PHP

php实现的CSS更新类实例

2014/09/22 PHP

PHP面向对象编程之深入理解方法重载与方法覆盖（多态）

2015/12/24 PHP

对于Laravel 5.5核心架构的深入理解

2018/02/22 PHP

JavaScript和ActionScript的交互实现代码

2010/08/01 Javascript

js 金额文本框实现代码

2012/02/14 Javascript

javascript错误的认识不用关心内存管理

2012/12/15 Javascript

多种方法判断Javascript对象是否存在

2013/09/22 Javascript

深入理解javascript的执行顺序

2014/04/04 Javascript

关于javascript模块加载技术的一些思考

2014/11/28 Javascript

javascript函数式编程实例分析

2015/04/25 Javascript

js实现滑动到页面底部自动加载更多功能

2017/02/15 Javascript

jQuery插件ContextMenu自定义图标

2017/03/15 Javascript

微信小程序“摇一摇”的实例代码

2017/07/20 Javascript

详解vue-cli与webpack结合如何处理静态资源

2017/09/19 Javascript

vue axios 二次封装的示例代码

2017/12/08 Javascript

nodejs实现的http、https 请求封装操作示例

2020/02/06 NodeJs

[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访

2016/06/29 DOTA

[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日

2021/03/11 DOTA

python基础教程之序列详解

2014/08/29 Python

python中循环语句while用法实例

2015/05/16 Python

Python3.4编程实现简单抓取爬虫功能示例

2017/09/14 Python

在Python中关于使用os模块遍历目录的实现方法

2019/01/03 Python

详解python中*号的用法

2019/10/21 Python

解决flask接口返回的内容中文乱码的问题

2020/04/03 Python

css3实现针线缝合效果(图解步骤)

2013/02/04 HTML / CSS

初一科学教学反思

2014/01/27 职场文书

新春联欢会主持词

2014/03/24 职场文书

优质服务活动实施方案

2014/05/02 职场文书

学校查摆问题整改措施

2014/09/28 职场文书

大学生个人年度总结范文

2015/02/15 职场文书

SQL写法--行行比较

2021/08/23 SQL Server

仅仅使用 HTML/CSS 实现各类进度条的方式汇总

2021/11/11 HTML / CSS

Python中的程序流程控制语句

2022/02/24 Python

vue使用refs获取嵌套组件中的值过程

2022/03/31 Vue.js