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 相关文章推荐
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
js网页实时倒计时精确到秒级
Feb 10 Javascript
iScroll.js 使用方法参考
May 16 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
Mar 17 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
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的可变变量名的使用方法分享
2012/02/05 PHP
基于php 随机数的深入理解
2013/06/05 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
Ext 表单布局实例代码
2009/04/30 Javascript
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
python赋值操作方法分享
2013/03/23 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
python+django+rest框架配置创建方法
2019/08/31 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
毕业生教师求职信
2013/10/20 职场文书
幼儿园教师备课制度
2014/01/12 职场文书
参观考察邀请函范文
2014/01/29 职场文书
师德个人剖析材料
2014/02/02 职场文书
公务员个人年终总结
2015/02/12 职场文书
给下属加薪申请报告
2015/05/15 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python