Question

编辑：我怀疑问题必须这样做，因为我的所有＃锚点都在同一页面上，除非我重新加载页面，JavaScript只是不知道我对链接的点击。我不知道如何解决这个问题...... :(

如果显示指向的部分，我试图让点击的链接保持蓝色。这是代码（我将Javascript代码放在this tutorial建议的结束正文标记之前）。

HTML

<ul id="menu">
    <li><a href="#section1">section1</a></li>
    <li><a href="#section2">section2</a></li>
    <li><a href="#section3">section3</a></li>

的JavaScript

links = document.getElementById("menu").getElementsByTagName("a");

for(i=0; i<links.length;i++) {
   if(links[i].href == window.location.hash) {
   links[i].className = "active";
    }
}

CSS

a.active {
    color:blue;
}

然而它似乎不起作用。有人可以帮忙吗？谢谢！

Answer 1

您的锚标记未关闭，请确保它们如下所示：

<a href="#section1">Link Text</a>

请注意您的代码遗失的结束"和>。

另外，您是否将JavaScript代码封装在<script>块中？

  <script>
    all of your javascript inside of this script block
  </script>
</body>

Answer 2

在这种情况下你的href可能是绝对的，而不仅仅是哈希：

   if(links[i].href == window.location.hash)

Answer 3

也许您需要将脚本放在函数中，将其链接到标题中，然后在加载时调用它。

function f(){
  var links = document.getElementById("menu").getElementsByTagName("a");

  for(i=0; i<links.length;i++) {
     if(links[i].href == window.location.hash) {
     links[i].className = "active";
      }
  }
}

<body onload="f()">

另请注意var links = ...含义声明。

使用JavaScript通过更改其类属性来设置链接的样式

3 个答案: