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 相关文章推荐
判断是否输入完毕再激活提交按钮
Jun 26 Javascript
Prototype 学习 Prototype对象
Jul 12 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
基于element-ui封装表单金额输入框的方法示例
Jan 06 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用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
js 操作select和option常用代码整理
2012/12/13 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
python实现用户答题功能
2018/01/17 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
目前最全的python的就业方向
2018/06/05 Python
Python适配器模式代码实现解析
2019/08/02 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
python字符串的index和find的区别详解
2020/06/20 Python
django template实现定义临时变量,自定义赋值、自增实例
2020/07/12 Python
python实现磁盘日志清理的示例
2020/11/05 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
Html5新增标签有哪些
2017/04/13 HTML / CSS
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
加多宝凉茶广告词
2014/03/18 职场文书
校庆筹备方案
2014/03/30 职场文书
安全生产标语
2014/06/06 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
 python中的元类metaclass详情
2022/05/30 Python