更改菜单选项不会更改活动 class，即使我遵循了下面 link 中的解决方案

Question

因此，我正在处理的网站是：http://wtr2022.webparity.net/。下面是示例的 link。

How to change active class while click to another link in bootstrap use jquery?

因此，我将展示我正在使用和编写的代码以及在 JS 文件中的何处可以找到它。

HTML: 当您打开 DEBUG 控制台或滚动到标签时，以下内容从第 77 行开始。

            <nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light sticky-top" id="ftco-navbar">
                <div class="container">

                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="fa fa-bars"></span> Menu
                    </button>
                    <div class="collapse navbar-collapse" id="ftco-nav">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item active"><a href="index.html" class="nav-link">Home</a></li>
                            <li class="nav-item"><a href="#aboutus" class="nav-link">About</a></li>
                            <li class="nav-item"><a href="#serviceslink" class="nav-link">Services</a></li>
                            <li class="nav-item"><a href="#projectslink" class="nav-link">Project</a></li>
                            <li class="nav-item"><a href="#bloglink" class="nav-link">Blog</a></li>
                            <li class="nav-item"><a href="#roofinglink" class="nav-link">Roofing</a></li>
                            <li class="nav-item"><a href="#contactlink" class="nav-link">Contact</a></li>
                        </ul>
                        <div class="d-flex align-items-center justify-content-center">
                            <img src="images/logos/weathertight-logo.png" class="logosmaller" alt=""/>
                            <!-- <span class="flaticon-roof-2"></span> -->
                        </div>
                        <div class="col-3 d-flex justify-content-end align-items-center">
                            <div class="social-media">
                                <p class="mb-0 d-flex">
                                    <a href="#" class="d-flex align-items-center justify-content-center"><span class="fa fa-facebook"><i class="sr-only">Facebook</i></span></a>
                                    <a href="#" class="d-flex align-items-center justify-content-center"><span class="fa fa-twitter"><i class="sr-only">Twitter</i></span></a>
                                    <a href="#" class="d-flex align-items-center justify-content-center"><span class="fa fa-instagram"><i class="sr-only">Instagram</i></span></a>
                                    <a href="#" class="d-flex align-items-center justify-content-center"><span class="fa fa-dribbble"><i class="sr-only">Dribbble</i></span></a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
            <!-- END nav -->

JS: 下面从行开始：194 或滚动直到找到此代码。

        $('.navbar-nav li a').click((e) => {

            $('.active').removeClass('active');

            console.log("Argument for CLICK FUNCTION: ", e.currentTarget.innerHTML);
            console.log("CURRENT TARGET for CLICK FUNCTION: ", e.currentTarget.parentElement);

            if (e.currentTarget.innerHTML === "Services") {
                funcs.changeAboutImage('sprayfoam');
            }

            // add the active class to the link we clicked
            // console.log("THIS: ", $(this));

            $(this).addClass('active');

            // e.preventDefault();
        });

        /* Code for changing active link on clicking */
        let btns = $("#ftco-nav .navbar-nav .nav-link");

        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener("click",
                    () => {

                let current = document.getElementsByClassName("active");
                console.log("CURRENT: ", current);
                // current[0].className = current[0].className.replace(" active", "");
                // this.className += " active";
            });
        }

        /* Code for changing active
         link on Scrolling */
        $(window).scroll(() => {
            let distance = $(window).scrollTop();

            // console.log($(window).scrollTop());

            if ($(window).scrollTop() > 701) {
                $('#ftco-navbar').addClass('navbar-fixed');
            }
            if ($(window).scrollTop() < 700) {
                $('#ftco-navbar').removeClass('navbar-fixed');
            }

            $('.ftco-section').each(function (i) {

                if ($(this).position().top <= distance + 250) {
                    $('.navbar-nav a.active').removeClass('active');
                    $('.navbar-nav a').eq(i).addClass('active');
                }
            });
        }).scroll();

事情是这样的：

第一个： 当我单击第一张幻灯片“了解更多...”按钮时，它需要滚动到“获取报价”部分，以便显示带有“获取报价”字样的黄色栏。不是。

第二个： 如果您从基础 URL http://wtr2022.webparity.net/ 开始并滚动直到菜单出现，您将看到 HOME 处于活动状态。但是，当您单击“关于”或任何其他菜单时，活动菜单无法突出显示。

第三当您从底部 URL 开始并滚动到下面的“我们提供的屋顶服务”时，您会看到 SPRAY FOAM ROOFING 已经激活，但是，每当您单击菜单时，激活的喷涂泡沫菜单和内容是不活跃，除非你点击它，否则什么也没有。

当您点击菜单并滚动到我们提供的屋顶服务时会发生这种情况：

我认为 ACTIVE 菜单是捆绑在一起的，意思是，当 addEventListener() 被点击时，它从所有内容中删除所有活动类，因此，原因。

如果有人能帮助我，我将不胜感激。谢谢。

Answer 1

您在 <a> 标签上的点击处理程序是 adding/removing .active class 到 <a> 标签，但它应该对父级执行<li> 标签：

$('#ftco-nav .navbar-nav li a').click((e) => {
  $('#ftco-nav .active').removeClass('active');
  $(e).parent().addClass('active');
  // ...
}

您的滚动处理程序有类似的问题。它应该是 adding/removing 来自 <li class="nav-item"> 标签的 .active class，而不是 <a> 标签：

if ($(this).position().top <= distance + 250) {
  $('#ftco-nav .navbar-nav .nav-item.active').removeClass('active');
  $('#ftco-nav .navbar-nav a').eq(i).parent().addClass('active');
}

更改菜单选项不会更改活动 class，即使我遵循了下面 link 中的解决方案

Changing menu options is NOT changing the active class even though I followed the solution in the link below

html

javascript

css

jquery

twitter-bootstrap