Question

单击我的第一个导航栏选项可以很好地滚动到html页面上的正确部分，但不会将导航栏文本的颜色更改为橙色。单击第二个导航栏选项，滚动到正确的部分，这次它将第一个导航栏文本的颜色更改为橙色，但不是活动的导航栏。单击第三个导航栏选项，滚动到正确的部分，这次它将第二个导航栏文本的颜色更改为橙色但不是活动的颜色。我正在尝试激活scrollspy以将活动类添加到滚动的导航栏项目。这看起来似乎不起作用，因为它看起来像以前的导航栏是活动的，而不是。

使用Javascript：

  // Activate scrollspy to add active class to navbar items on scroll
  $('body').scrollspy({
    target: '#mainNav',
    offset: 57
  });

CSS：

        #mainNav .navbar-nav > li.nav-item > a.nav-link.active, #mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active {
        color: #f05f40 !important;
        background-color: transparent;
    }

HTML：

    <body id="page-top">
        <!-- Navigation -->
        <nav class=" navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
            <div class="container">
                <a class="navbar-brand js-scroll-trigger" href="#page-top">Web Designer & Database Developer</a>
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger" href="#about">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger" href="#skills">Skills</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

 <section class="bg-primary" id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto text-center">
                    <h2 class="section-heading text-white">About me!</h2>
                    <img class="img" src="img/a.jpg" />
                    <hr class="light my-4">
                    <p class="text-faded mb-4">Example</p>
                    <a class="btn btn-light btn-xl js-scroll-trigger" href="#skills">Get Started!</a>
                </div>
            </div>
        </div>
    </section>
.....
<body>

On skills section but highlighted about from nav bar in orange

导航栏上的HTML CSS活动类使用Javascript scrollspy和Bootstrap不工作

0 个答案: