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 相关文章推荐
清除div下面的所有标签的方法
Feb 17 Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 Javascript
JS前端基于canvas给图片添加水印
Nov 11 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
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
PHP 透明水印生成代码
2012/08/27 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
浅析Python 中整型对象存储的位置
2016/05/16 Python
通过python爬虫赚钱的方法
2019/01/29 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
如何查找和删除数据库中的重复数据
2014/11/05 面试题
创业计划书中要认真思考的问题
2013/12/28 职场文书
查环查孕证明
2014/01/10 职场文书
红领巾心向党广播稿
2014/01/19 职场文书
2014年小学元旦活动方案
2014/02/12 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
单位在职证明书
2014/09/11 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
导游词之扬州大明寺
2019/10/09 职场文书