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 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
使用隐藏的new来创建对象
Mar 29 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
vue观察模式浅析
Sep 25 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 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入门小知识
2008/03/24 PHP
php 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
Python绘制KS曲线的实现方法
2018/08/13 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
服务器端jupyter notebook映射到本地浏览器的操作
2020/04/14 Python
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
研究生考核个人自我鉴定
2014/03/27 职场文书
淘宝活动总结范文
2014/06/26 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python