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 相关文章推荐
日期 时间js控件
May 07 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
js实现百度搜索提示框
Feb 05 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
React路由鉴权的实现方法
Sep 05 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
小程序开发之模态框组件封装
Apr 23 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中的extract的作用分析
2008/04/09 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
Bootstrap每天必学之日期控制
2016/03/07 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
python每隔N秒运行指定函数的方法
2015/03/16 Python
python遍历数组的方法小结
2015/04/30 Python
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
使用python实现kNN分类算法
2019/10/16 Python
python计算无向图节点度的实例代码
2019/11/22 Python
python多线程使用方法实例详解
2019/12/30 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
实习生自我鉴定范文
2013/12/05 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
白血病募捐倡议书
2014/05/14 职场文书
Redis批量生成数据的实现
2022/06/05 Redis