Js实现当前点击a标签变色突出显示其他a标签回复原色
更新时间：2013年11月27日 15:56:31 作者：
当一个页面有多个a标签，实现当前点击a标签变色，其他a标签回复原色，具体实现如下，喜欢的朋友可以参考下
当一个页面有多个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>
利用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>
相关文章
XHTML-Strict 内允许出现的标签...2006-12-12
javascript中的parseInt和parseFloat区别
这篇文章用简单的小例子演示了parseInt和parseFloat区别，有需要的朋友可以参考一下2013-07-07
这篇文章主要给大家介绍了关于如何用js获得当前视频播放状态的相关资料,大家在日常应用场景中可能会遇到这么一个情况,需要判断用户是否完整的观看完了一部视频,需要的朋友可以参考下2023-07-07
改进点：支持同页面有多个文本框，可自动向不同的文本框传值。先看演示吧2008-09-09
这篇文章主要介绍了在Iframe中获取父窗口中表单的值(示例代码)。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
下面小编就为大家分享两段简单的JS代码防止SQL注入。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-04-04
使用mixins实现elementUI表单全局验证的解决方法
这篇文章主要介绍了使用mixins实现elementUI表单的全局验证的解决方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
这篇文章主要介绍了javascript进行四舍五入方法汇总，并给出了相关示例,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了JavaScript弹窗基础篇的相关资料,需要的朋友可以参考下2016-04-04
这篇文章主要为大家详细介绍了微信小程序实现刷脸登录，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-05-05
最新评论