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 相关文章推荐
html超链接打开窗口大小的方法
Mar 05 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
AngularJS动态生成div的ID源码解析
Aug 29 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
js实现转动骰子模型
Oct 24 Javascript
浅析JavaScript 函数柯里化
Sep 08 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
php array_unique之后json_encode需要注意
2011/01/02 PHP
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
php实现监听事件
2013/11/06 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
php结合redis高并发下发帖、发微博的实现方法
2016/12/15 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
Prototype Hash对象 学习
2009/07/19 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
python逐行读取文件内容的三种方法
2014/01/20 Python
python创建关联数组(字典)的方法
2015/05/04 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
在python中求分布函数相关的包实例
2020/04/15 Python
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
介绍一下Linux文件的记录形式
2012/04/18 面试题
高校教师思想汇报
2014/01/11 职场文书
工作时间上网检讨书
2014/02/03 职场文书
汽车维修求职信
2014/06/15 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
中学政教处工作总结
2015/08/13 职场文书
OpenCV实现反阈值二值化
2021/11/17 Java/Android
解析mybatis-plus中的resultMap简单使用
2021/11/23 Java/Android
在Python 中将类对象序列化为JSON
2022/04/06 Python
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang
mysql sql常用语句大全
2022/06/21 MySQL