Question

更新！

我已经完成了大约4个多小时的研究，并设计了我的代码，无需使用硬编码的目录/路径。

我们的想法是从currentLinkFunction()标记中的onload属性调用<a>函数。

如果页面位置等于href标记内的<a>，则下面的if语句会将source元素设置为粗体。

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>

原帖：

我尝试将导航栏的样式设置为当前页面链接为粗体。

我这样做的方法是调用函数onload来设置样式，如果href = index.html。

这是我的JSFiddle

HTML

<ul>
  <li><a onload="currentLinkFunction()" href="index.html">Home</a></li>
  <li><a onload="currentLinkFunction()" href="#">About</a></li>
  <li><a onload="currentLinkFunction()" href="#">Portfolio</a></li>
  <li><a onload="currentLinkFunction()" href="#">Software</a></li>
  <li><a onload="currentLinkFunction()" href="#">Photograhpy</a></li>
  <li><a onload="currentLinkFunction()" href="#">Contact</a></li>
</ul>

的JavaScript

function currentLinkFunction() {
  if (location.href == "index.html") {
    location.style.fontWeight = "bold";
  }
}

Answer 1

location.href会返回完整网址。

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

<子> http://www.w3schools.com/jsref/prop_loc_href.asp

您正在寻找location.pathname。

pathname属性设置或返回URL的路径名。

将location.href替换为location.pathname。
location.style无效，因为location不是DOM对象。因此，您可以在id的链接中添加class或index.html，也可以使用以下网址找到该对象：

＆＃13;

  function currentLinkFunction() {
    if (location.pathname == "index.html") {
      document.querySelector('a[href="index.html"]').style.fontWeight = "bold";
    }
  }

＆＃13;

Answer 2

问题是正在为每个元素调用脚本。

解决方案是使用此脚本一次并遍历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";
    }
}

在比较此方案中的值时，还必须使用===运算符。

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

2 个答案: