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 Autocomplete自动完成插件
Jul 17 Javascript
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
jquery插件制作 图片走廊 gallery
Aug 17 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
JS简单获取当前年月日星期的方法示例
Feb 07 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 Javascript
JS+css3实现幻灯片轮播图
Aug 14 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 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
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
php 验证码实例代码
2010/06/01 PHP
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
php短信接口代码
2016/05/13 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
Python模块学习 re 正则表达式
2011/05/19 Python
Python random模块常用方法
2014/11/03 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
django 消息框架 message使用详解
2019/07/22 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
美国旅游网站:Tours4Fun
2017/02/17 全球购物
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
授权委托书
2014/07/31 职场文书
年终工作总结范文2014
2014/11/27 职场文书
工作能力自我评价2015
2015/03/05 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
JS 基本概念详细介绍
2021/10/16 Javascript
python中对列表的删除和添加方法详解
2022/02/24 Python