Question

在我的网页顶部，有一个导航栏，其中包含指向不同部分的链接：

当向下滚动页面时，我希望相关链接更改颜色。我该怎么做？

完整屏幕截图：（https://eksiup.com/30f40ee79361）

我上面的css代码；

   .custom-nav .navbar-nav li a:hover,
    .custom-nav .navbar-nav li a:active,
    .custom-nav .navbar-nav li.active a {
        color: #0AF3A9 !important;
    }

我上面的html代码；

     <!-- Start Header -->
    <header id="header">
        <!-- Start Navbar-->
        <nav class="navbar fixed-top navbar-expand-lg custom-nav">
            <div class="container">
                <a class="navbar-brand" href="index.html">
                    <img class="img-fluid" src="assets/images/logo.png" height="33" width="94" alt="logo">
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#about-us">About Us</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#feature">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#screenshot">Screenshot</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#price">Price</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#team">Team</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#testimonials">Testimonials</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#faq">FAQ's</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link pr-0" href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- End Navbar-->
    </header>
    <!-- End Header -->
<!-- Start Banner -->
<section id="home">
    <div class="container">
        <div class="row">
            <div class="col-xl-6 col-lg-6 col-md-6">
                <div class="banner-content">
                    <h1>Increase your productivity
                        with Firez</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                        magna aliqua.  </p>
                    <div class="holder-link">
                        <a  href="#" class="mr-3">
                            <img class="img-fluid" src="assets/images/app-store.png" width="161" height="55"  alt="appstore image">
                        </a>
                        <a href="#">
                            <img class="img-fluid" src="assets/images/play-store.png" width="160" height="54"  alt="googleplay image">
                        </a>
                    </div>
                    <div class="arrow bounce">
                        <a href="#about-us">
                             <i class="fa fa-arrow-circle-down"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-lg-6 col-md-6 banner-right">
                <img class="img-fluid" src="assets/images/app.png" width="950" height="748">
            </div>
        </div>
        <div class="rounded-shape-1 d-none d-sm-block"></div>
        <div class="rounded-shape-2 d-none d-sm-block"></div>
        <div class="rounded-shape-3 d-none d-sm-block"></div>
    </div>
    <div class="bottom-shape">
        <img class="img-fluid" src="assets/images/bottom-shape.png" alt="bottom-shape image">
    </div>
</section>
<!-- End Banner -->

<!-- Start AboutUs -->
<section id="about-us" class="section">
    <div class="container">
        <div class="row">
            <div class="col-xl-5 col-lg-5 col-md-5  vertical-image">
                <img class="img-fluid" src="assets/images/about-us.png" width="800" height="820" alt="about-us image">
            </div>
            <div class="col-xl-7 col-lg-7 col-md-7 sub-title about-us-right">
                <h2>Complete Firez once and use it anywhere</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  </p>
                <div class="row mt-5">
                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 about-item">
                        <div class="text-center">
                            <img class="img-fluid" src="assets/icon/fantastic-design.png" width="60" height="60" alt="fantastic-design icon">
                            <div class="mt-4">
                                <h5 class="card-title">Fantastic Design</h5>
                                <p class="card-text mt-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 about-item">
                        <div class="text-center">
                            <img class="img-fluid" src="assets/icon/security.png" width="60" height="60" alt="security icon">
                            <div class="mt-4">
                                <h5 class="card-title">High Security</h5>
                                <p class="card-text mt-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 about-item">
                        <div class="text-center">
                            <img class="img-fluid" src="assets/icon/options.png" width="60" height="60" alt="options icon">
                            <div class="mt-4">
                                <h5 class="card-title">Advanced Options</h5>
                                <p class="card-text mt-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End AboutUs -->

Answer 1

我解决了这个问题。更改上面的CSS代码；

.navbar-nav a.nav-link.active {
    color: #0AF3A9 !important;
}

如何更改bootstrap 4.1 scrollspy（活动的）活动链接的颜色？

1 个答案: