通过单击和页面滚动更改活动导航类并通过活动类编辑导航项

Question

我已经完成了一些 javascript 课程，但实际上在功能性 Web 项目上使用它是非常谦虚的。

我有一个带有同页页面链接的导航栏。我想将导航项目更改为在单击它们时以及当页面滚动到页面的该部分时都处于活动状态。我还想更改活动导航项的 innerHTML。

我的 javascript 显然是一团糟。我想尝试至少解决这个问题，然后回到练习 JS。

<div class="collapse navbar-collapse" style="background-color: #1e3d58;" id="navbarToggler">
    <ul class="navbar-nav text-center mx-auto mb-2 mb-sm-0">
        <li class="nav-item">
            <a class="nav-link" href="#home">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#about">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#skills">Skills</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#contact">Contact</a>
        </li>
    </ul>
    <div class="d-none d-sm-flex mt-sm-2 mt-md-0 justify-content-center">
        <a class="btn btn-social-icon btn-linkedin" href="#"><i class="fab fa-2x fa-github-square"></i></a>
        <a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i
                class="fab fa-2x fa-linkedin"></i></a>
    </div>
</div>

.nav-item {
  padding: 0px 2vw 0px 2vw;
}

.nav-link {
  color: #e8eef1 !important;
}

nav .fab {
  color: #e8eef1;
  margin: 0px -8px 0px -8px;
}

nav {
  max-height: 60px;
}

document.querySelector(function () {
    document.querySelector(".nav-item").click(function () {
        document.querySelector(".nav-item").each(function () {
            document.querySelector(this).querySelector("a").removeClass("active");
        });
        document.querySelector(this).querySelector("a").classList.add("active");
    });
});

document.querySelector(function () {
    for (document.querySelector(".nav-item")) {
        if document.querySelector("a").hasClass("active")
        then document.querySelector("a").innerHTML = "<" + document.querySelector('a') + "/>"
    };
});

Answer 1

js 会是这样的：

let navItems = document.querySelectorAll('li.nav-item a');

navItems.forEach((el) => {
  el.addEventListener('click',() => {
    if (!el.classList.contains('active') {
      navItems.forEach((others) => {
          //Remove the update to innerHTML for all of the items however you plan on doing that, I would suggest just adding or removing a class to update their style
          others.classList.remove('active');
      };
      el.classList.add('active');
    };
    
  });
});

Answer 2

我能够找到解决所有 3 个问题的解决方案。

• 点击导航项时活动类发生变化
• 当页面滚动到页面部分时，活动类会发生变化
• 当链接类处于活动状态时，导航栏项目链接的文本内容会发生变化

Javascript

const sections = document.querySelectorAll('section');
const navLi = document.querySelectorAll('#navbarToggler li a')

window.addEventListener('scroll', ()=> {
    let current = "";
    sections.forEach( section => {
        const sectionTop = section.offsetTop;
        const sectionHeight = section.clientHeight;
        if(scrollY >= (sectionTop - sectionHeight/3)){
            current = section.getAttribute('id');
        }
    })
    navLi.forEach( a => {
        a.classList.remove('active');
        if(a.classList.contains(current)){
            a.classList.add('active')
        }
    })
})


window.addEventListener('scroll'||'click', ()=> {
    navLi.forEach( a => {
        const navText= a.textContent;
        if (a.classList.contains('active')){
            if(a.textContent == "Home"){
                a.textContent = "<Home/>"
            }
            if(a.textContent == "About"){
                a.textContent = "<About/>"
            }
            if(a.textContent == "Skills"){
                a.textContent = "<Skills/>"
            }
            if(a.textContent == "Contact"){
                a.textContent = "<Contact/>"
            }
        }
        else {
            if(a.textContent == "<Home/>"){
                a.textContent = "Home"
            }
            if(a.textContent == "<About/>"){
                a.textContent = "About"
            }
            if(a.textContent == "<Skills/>"){
                a.textContent = "Skills"
            }
            if(a.textContent == "<Contact/>"){
                a.textContent = "Contact"
            }
        }
        })
})

HTML

<nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: #1e3d58;">
        <div class=" container">
            <a class="navbar-brand" href="#home"><strong>.Vince-clicks{}</strong></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler"
                aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" style="background-color: #1e3d58;" id="navbarToggler">
                <ul class="navbar-nav text-center mx-auto mb-2 mb-sm-0">
                    <li class="nav-item">
                        <a class="nav-link home active" href="#home">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link about" href="#about">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link skills" href="#skills">Skills</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link contact" href="#contact">Contact</a>
                    </li>
                </ul>
                <div class="d-none d-sm-flex mt-sm-2 mt-md-0 justify-content-center">
                    <a class="btn btn-social-icon btn-linkedin" href="#"><i class="fab fa-2x fa-github-square"></i></a>
                    <a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i
                            class="fab fa-2x fa-linkedin"></i></a>
                </div>
            </div>
        </div>
    </nav>

每个页面部分也有一个适当的 id。

希望这可以帮助遇到同样问题的其他人。