Javascript 突出显示当前导航栏链接？_Javascript_Html_Css

Javascript 突出显示当前导航栏链接？

javascript html css

Javascript 突出显示当前导航栏链接？,javascript,html,css,Javascript,Html,Css,更新我又做了大约4个小时的研究，并设计了我的代码，使其在没有硬编码目录/路径的情况下工作其思想是从标记中的onload属性调用currentLinkFunction（）函数 function currentLinkFunction() { if (window.location.pathname == window.event.srcElement.href.pathname) { window.event.srcElement.style.fontWeight =

更新
我又做了大约4个小时的研究，并设计了我的代码，使其在没有硬编码目录/路径的情况下工作
其思想是从
标记中的
onload
属性调用
currentLinkFunction（）
函数

function currentLinkFunction() { if (window.location.pathname == window.event.srcElement.href.pathname) { window.event.srcElement.style.fontWeight = "bold"; } }
如果页面位置等于
标记中的
href
，则下面的if语句将源元素设置为粗体

function currentLinkFunction() { if (window.location.pathname == window.event.srcElement.href.pathname) { window.event.srcElement.style.fontWeight = "bold"; } }
这是前提，但它似乎不起作用
以下是全文：

<head> <meta charset="UTF-8"> <title>Smith</title> <link rel="stylesheet" type="text/css" href="resources/styles.css"> <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet"> </head> <body> <header> <h1 class="site-title">Smith</h1> <ul> <li><a onload="currentLinkFunction()" class="nav-link" href="/index.html">Home</a></li> <li><a onload="currentLinkFunction()" class="nav-link" href="#">About</a></li> <li><a onload="currentLinkFunction()" class="nav-link" href="#">Portfolio</a></li> <li><a onload="currentLinkFunction()" class="nav-link" href="#">Software</a></li> <li><a onload="currentLinkFunction()" class="nav-link" href="#">Photograhpy</a></li> <li><a onload="currentLinkFunction()" class="nav-link" href="#">Contact</a></li> </ul> </header> <footer> <h2 id="site-copywrite">Designed by <b>Smith</b></h2> </footer> <script type="text/javascript"> function currentLinkFunction() { if (window.location.pathname == window.event.srcElement.href.pathname) { window.event.srcElement.style.fontWeight = "bold"; } } </script> </body>

location.href
返回完整的URL
href属性设置或返回当前页面的整个URL

你在找我
pathname属性设置或返回URL的路径名

将
location.href
替换为
location.pathname

location.style
无效，因为
location
不是DOM对象。因此，您可以在
index.html
的链接中添加
id
或
class
，或者使用javascript查找对象，如下所示：

函数currentLinkFunction（）{ if（location.pathname==“index.html”）{ document.querySelector（'a[href=“index.html”]”）style.fontwweight=“bold”； } }
问题是每个元素都在调用脚本
解决方案是使用此脚本一次并循环通过
nav link
类的每个元素

var i = 0; var navLinkCount = document.getElementsByClassName("nav-link"); for (i; i < navLinkCount.length; i = i + 1) { if (window.location.pathname === navLinkCount[i].getAttribute("href")) { navLinkCount[i].style.fontWeight = "bold"; navLinkCount[i].style.backgroundColor = "#E0E0E0"; } }

var i=0； var navLinkCount=document.getElementsByClassName（“nav链接”）；对于（i；i
此外，在这种情况下比较值时必须使用== 运算符。谢谢，我从来不知道这一点。但它仍然不起作用，我尝试添加样式的方式有问题吗？