JS实现当前点击a标签变色突出显示其他a标签回复原色

JS实现当前点击a标签变色突出显示其他a标签回复原色

当页面存在多个a标签且点击后刷新当前页时，如何使被点击的标签高亮显示，而其他标签恢复默认颜色？

可以通过JS代码实现该功能：

假设当前页面地址为“1.aspx”

第一步，为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>

第二步，编写JS处理逻辑：

 
<script>
$(document).ready(function(){
var id = window.location.substring(window.location.indexOf("?id=")+4, 1); // 获取URL中的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的removeClass()和addClass()方法实现
</script>