更改<导航>当向下滚动到具有特定id的元素时

Changing span of an item in <nav> when scrolling down to an element with a specific id

本文关键字：id 元素 滚动 gt 导航 lt 更改      更新时间：2024-01-20

在我的HTML+引导程序网页上，有一个<nav class="navbar navbar-default navbar-fixed-top">。在导航栏中，我有这个：

<li class="active"><a href="#">Home</a></li>

class="active"总是在那里。但还有另一个<li>:

<li><a href="#about">About</a></li>

如果我点击<li>，页面将向下转到带有标签action:的元素

<h1 style="text-align: center;" id="about">About</h1>

但滚动后，"主页"<li>仍处于活动状态，"关于"<li>仍处于非活动状态
如何更改哪个<li>处于活动状态？

为了切换一个类，您需要使用一些Javascript：

    var menu = document.querySelector('<put direct parent of lists here (ex: .menu)>');
    var anchors = menu.getElementsByTagName('li');
    for (var i = 0; i < anchors.length; i += 1) {
      anchors[i].addEventListener('click', function() { clickHandler(anchors[i]) }, false);
    }
    function clickHandler(anchor) {
      var hasClass = anchor.getAttribute('class');
      if (hasClass !== 'active') {
        anchor.setAttribute('class', 'active');
      }
    }

希望这有帮助：）

相关文章：