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,否则添加的背景是一整行。

Javascript 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
简单实现js页面切换功能
Jan 10 Javascript
原生js编写焦点图效果
Dec 08 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
微信小程序支付之c#后台实现方法
Oct 19 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 Javascript
Vue实现计算器计算效果
Aug 17 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
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
浅析php原型模式
2014/11/25 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
2013/06/06 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
Ajax基础知识详解
2017/02/17 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
JS实现简单日历特效
2020/01/03 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
Python随机生成数模块random使用实例
2015/04/13 Python
Python用模块pytz来转换时区
2016/08/19 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
Django实现发送邮件功能
2019/07/18 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
python利用platform模块获取系统信息
2020/10/09 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
迎新晚会邀请函
2014/02/01 职场文书
献爱心倡议书
2014/04/14 职场文书
维修工先进事迹
2014/05/29 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
初中教师个人总结
2015/02/10 职场文书
javascript canvas实现雨滴效果
2021/06/09 Javascript