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 相关文章推荐
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
Jun 27 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 Javascript
JavaScript实现表单验证功能
Dec 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
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
javascript 常用代码技巧大收集
2009/02/25 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
JS控制伪元素的方法汇总
2016/04/06 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
python生成指定长度的随机数密码
2014/01/23 Python
python多线程操作实例
2014/11/21 Python
Python作用域用法实例详解
2016/03/15 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
实习销售业务员自我鉴定
2013/09/21 职场文书
医院实习介绍信
2014/01/12 职场文书
先进党支部事迹材料
2014/01/13 职场文书
珠宝店促销方案
2014/03/21 职场文书
法制宣传月活动总结
2014/04/29 职场文书