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 相关文章推荐
asp 的 分词实现代码
May 24 Javascript
JavaScript 函数调用规则
Sep 14 Javascript
JS解决url传值出现中文乱码的另类办法
Apr 08 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
koa上传excel文件并解析的实现方法
Aug 09 Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 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中几种常见的超时处理全面总结
2012/09/11 PHP
php解析json数据实例
2014/08/19 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
python实现k-means聚类算法
2018/02/23 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
python对execl 处理操作代码
2020/06/22 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
应届生求职推荐信
2013/10/28 职场文书
制衣厂各岗位职责
2013/12/02 职场文书
初中生自我评价
2014/02/01 职场文书
优秀经理事迹材料
2014/02/01 职场文书
商业街策划方案
2014/05/31 职场文书
中学生逃课检讨书
2015/02/17 职场文书
教师求职自荐信
2015/03/26 职场文书
小平小道观后感
2015/06/09 职场文书