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修改css样式style浅谈
May 06 Javascript
js结合正则实现国内手机号段校验
Jun 19 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
详解JavaScript树结构
Jan 09 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 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文件操作之小型留言本实例
2015/06/20 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
PDO::errorCode讲解
2019/01/28 PHP
5 cool javascript apps
2007/03/24 Javascript
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
python开头的coding设置方法
2019/08/08 Python
详解Python实现进度条的4种方式
2020/01/15 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
python 利用toapi库自动生成api
2020/10/19 Python
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
英语专业学子个人的自我评价
2013/10/02 职场文书
《长城》教学反思
2014/02/14 职场文书
2014年开学第一课活动方案
2014/03/06 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python