Js实现当前点击a标签变色突出显示其他a标签回复原色


Posted in Javascript onNovember 27, 2013

当一个页面有多个a标签,且点击后会跳转至当前页面,如何实现被点击标签变色突出显示,其他标签回复原色呢?

利用JS可实现:

假设当前页面是“1.aspx”

1. 给a标签ID设值:

<a href="1.aspx?id=1" id="1" target="_parent">""</a> 
<a href="1.aspx?id=2" id="2" target="_parent">""</a> 
<a href="1.aspx?id=3" id="3" target="_parent">""</a>

2. 写JS方法:
<script> 
&(document).ready(function(){ 
var id = windows.ulr.substring(windows.ulr.IndeOf("?id="),1) //取得id值 
var currtA = document.getElementById(id); //取得当前被点击a标签 
if(currtA != null) 
currtA.style.color = "#f00"; 
}); 
</script>

对于其他情况,如点击a标签页面不跳转,则可以这样写:
<a href="#" onclick="changeCss(this)">""</a> <script> 
function changeCss(obj){ 
var alist = document.getElementsByTagName("a"); 
for(var i =0;i < alist.Length;i++){ 
alist[i].style.color = "#000"; //给所有a标签赋原色 
} 
obj.style.color = "#f00"; //令当前标签高亮 
} 
//当然也可以用Jquery的$("a").removeCss() 和addCss()来实现 
</script>
Javascript 相关文章推荐
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
javascript中的this详解
Dec 08 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
JS获取动态添加元素的方法详解
Jul 31 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 #Javascript
jquery checkbox实现单选小例
Nov 27 #Javascript
子页向父页传值示例
Nov 27 #Javascript
js改变文章字体大小的实例代码
Nov 27 #Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 #Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 #Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 #Javascript
You might like
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
PHP代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
深入讲解Python编程中的字符串
2015/10/14 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
Django nginx配置实现过程详解
2020/09/10 Python
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
司机辞职报告范文
2014/01/20 职场文书
省级四好少年事迹材料
2014/01/25 职场文书
办理收楼委托书范本
2014/10/09 职场文书
岗位聘任报告
2015/03/02 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技