JavaScript实现导航链接单选高亮效果

核心逻辑与准备

要实现链接单选，需要处理两个关键部分：一是页面加载完成后为所有 <a> 标签绑定事件；二是点击发生时，遍历列表修改样式，并决定是否允许链接跳转。此外，为避免全局污染，应尽量将变量控制在函数作用域内。

第1步：初始化事件绑定

目的：确保页面上的所有链接在加载完毕后都能响应点击事件。
操作：创建一个名为 IniEvent 的函数，利用 document.getElementsByTagName("a") 获取链接集合，并使用循环将自定义的 LinkOnClick 函数赋值给每个链接的 onclick 属性。

function IniEvent() {
  var links = document.getElementsByTagName("a");
  for (var i = 0; i < links.length; i++) {
    links[i].onclick = LinkOnClick;
  }
}

第2步：实现单击后的样式切换

目的：根据用户点击的目标，高亮当前项并重置其他项。
操作：在 LinkOnClick 函数中再次获取当前页面的所有链接。由于 this 指向被点击的当前元素，通过判断 links[i] == this 来区分当前点击项与其他项，分别设置 style.background 为 "red" 和 "white"。

注意：每次调用都重新获取 getElementsByTagName 结果是为了保证节点列表是当前最新的，避免潜在的引用问题，尽管在此简单场景下直接复用局部变量也是可行的。

function LinkOnClick() {
  var links = document.getElementsByTagName("a");
  for (var i = 0; i < links.length; i++) {
    if (links[i] == this) {
      // 高亮当前选中的链接
      links[i].style.background = "red";
    } else {
      // 重置非选中链接的背景
      links[i].style.background = "white";
    }
  }      
  // 阻止链接的默认跳转行为
  window.event.returnValue = false;
}

HTML 结构集成

将上述脚本嵌入页面头部，并在 <body> 添加 onload="IniEvent()" 以触发初始化。下方放置若干 <a> 标签用于测试，点击后背景色会发生变化且不会跳转至目标 URL。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>链接单选</title>
<script type="text/javascript">
// ... 插入上方 IniEvent 和 LinkOnClick 代码 ...
</script>
</head>
<body onload="IniEvent()">
<a href="http://www.baidu.com">百度</a><br />
<a href="http://www.sohu.com">搜狐</a><br />
<a href="https://www.jb51.net">本站</a><br />
<a href="http://www.tudou.com">土豆</a><br />
<a href="http://www.csdn.com">CSDN</a><br />
</body>
</html>

关键点说明与排错

• 阻止跳转：文中使用 window.event.returnValue = false; 实现了类似 return false; 的效果，防止链接实际跳转。这在使用旧式 IE 浏览器兼容时尤为重要，现代标准环境中也可直接在函数末尾返回 false 或在绑定时使用 addEventListener 调用 e.preventDefault()。
• 样式局限性：本例演示的是修改背景颜色。在实际项目中，建议通过动态切换 CSS 类名（如 classList.add('active')）来实现样式变化，以保持内容与样式的分离。
• 重复获取 DOM：IniEvent 和 LinkOnClick 中都调用了 getElementsByTagName，这是为了代码独立性和安全性考虑，避免将 DOM 集合缓存到不确定的位置导致内存或状态错误。

以上就是 JavaScript 实现链接单选高亮效果的详细内容，更多关于 JavaScript DOM 交互技巧的资料请关注本站其它相关文章！