javascript - scrollspy 根本不突出导航链接

问题描述

我已经使用 js 设置了 Bootstrap scrollspy，在单击导航链接时，它会将我引导到正确的部分，但是当该部分处于活动状态时它们不会突出显示。我尝试过在 body 标签中使用和不使用滚动间谍组件。这只是一个简单的网页。什么是要做？请帮忙..

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="stylesheet.css">

    <title>Bootstrap Sandbox</title>
</head>


<body data-spy="scroll" data-target=".navbar" data-offset="50">
    <!-- <body> -->

    <!--##################START HERE###################-->


    <!-- STICKY TOP -->
    <nav class="navbar">
        <a href="#" class="navbar-brand">Navbar</a>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#section1">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#section2">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#section3">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#section4">Contact</a>
            </li>
        </ul>
    </nav>

    <br><br><br>
    <div class="container" >
        
        <p>Home</p>
        <br>
        <img src="images\bart.png" alt="lisa_simpson">
        <!-- <img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fwww.clipartkey.com%2Fmpngs%2Fm%2F152-1526843_lisa-simpson-lisa-simpson-transparent-background.png&imgrefurl=https%3A%2F%2Fwww.clipartkey.com%2Fview%2FJRiJwi_lisa-simpson-lisa-simpson-transparent-background%2F&tbnid=2unr1h0B-QXUOM&vet=12ahUKEwij3bf7mrLtAhXCcSsKHfqXBOYQMygCegUIARCuAQ..i&docid=gZ9_98N5w-j_-M&w=900&h=690&q=simpson%20white%20background&ved=2ahUKEwij3bf7mrLtAhXCcSsKHfqXBOYQMygCegUIARCuAQ" alt=""> -->
        <br>
    </div>
    <br>
    <div class="container" id="section2">
        <p>About</p>
        <img src="images/walt.png" alt="walt">
        <br>
    </div>
    <br>
    <div class="container" id="section3">
        <p>Services</p>
        <img src="images/heisenberg.png" alt="" style="background-color:;">
        <br>
    </div>
    <br>
    <div class="container" id="section4">
        <p>Contact</p>
        <br>
        <img src="images/homer.png" alt="">
    </div>



    <!-- ./container -->
    <div style="margin-top:500px;"></div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"
        integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
        crossorigin="anonymous"></script>
        
        <script>
            $(document).ready(function(){
                $('body').scrollspy({target:".navbar",offset:"150"});
            });

        </script>
            
</body>

</html>

CSS


body{
    background-color: black;
    position: relative;

}
*{
    margin: 0rem;
}

.navbar{
    position: fixed;
    display:flex;
    /* position: relative; */
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    padding:.4rem 1rem;
    background-color:#343a40!important;
    box-sizing: border-box;
    line-height: 1.649999;
    width:100%;
    /* box-shadow: 0px 3px 5px #f38888; */
    }
.navbar-nav{
    display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;list-style:none; 
}
.nav-item{
    margin-bottom:-1px;
    
}
.nav-link{
    display:block;padding:.5rem 1rem;
    color: white;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-decoration: none;
    
}

.nav-link:hover{color:red}
.nav-link:active{color:red}


.navbar-brand{
    display:inline-block;padding-top:.3125rem;padding-bottom:.3125rem;margin-right:1rem;font-size:1.25rem;line-height:inherit;white-space:nowrap;
    color: whitesmoke;
    padding-left: 2rem;
    margin-left:1rem;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-decoration:none;
}
.navbar-brand:hover{color:lightgray;}
.navbar-brand:active{color:lightgray;}

p{
    color:black;
    font-size: 3rem;
    text-align: center;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.img{
    background-color:transparent;
    align-content: center;

}
.container{
    background-color:lightgray;
    margin: 1rem;
    padding: 80px;
    text-align: center;
}
.navbar-nav li{
    float: left;
}

标签： javascripthtmlcssscrollspy

javascript - scrollspy 根本不突出导航链接

问题描述

解决方案

推荐阅读