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 相关文章推荐
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
Aug 02 Javascript
文档对象模型DOM通俗讲解
Nov 01 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
JavaScript二维数组实现的省市联动菜单
May 08 Javascript
jQuery子属性过滤选择器用法分析
Feb 10 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
Aug 02 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 Javascript
加速vue组件渲染之性能优化
Apr 09 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遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
总结一些js自定义的函数
2006/08/05 Javascript
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
JS作用域深度解析
2016/12/29 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
详解Vue如何支持JSX语法
2017/11/10 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
python获取从命令行输入数字的方法
2015/04/29 Python
深入学习python的yield和generator
2016/03/10 Python
使用Python的Flask框架构建大型Web应用程序的结构示例
2016/06/04 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
德国旅游网站:weg.de
2018/06/03 全球购物
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
妇科医生自荐信
2013/11/05 职场文书
法警的竞聘演讲稿
2014/01/02 职场文书
爱国演讲稿400字
2014/05/07 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python