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 相关文章推荐
Jquery替换已存在于element上的event的方法
Mar 09 Javascript
动态加载脚本提升javascript性能
Feb 24 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
JS中Object对象的原型概念基础
Jan 29 Javascript
vue组件横向树实现代码
Aug 02 Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 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
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
jQuery实现网页拼图游戏
2020/04/22 jQuery
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
ptyhon实现sitemap生成示例
2014/03/30 Python
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
Python变量和数据类型详解
2017/02/15 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
总经理助理工作职责
2014/02/06 职场文书
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
婚纱店策划方案
2014/05/22 职场文书
社区平安建设方案
2014/05/25 职场文书
社区护士演讲稿
2014/08/27 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
好员工观后感
2015/06/17 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis