滚动时引导导航栏活动背景颜色
[英]Bootstrap navbar active background color when scrolling
问题描述
由于链接指向的部分，我正在尝试在滚动时更改 Bootstrap 导航栏项目的背景颜色（目前它只能通过单击工作）。 我一直在阅读有关 Scrollspy 的文章，但它对我不起作用。 任何帮助将不胜感激 ：）
代码：
$(document).ready(function () { $('ul.navbar-nav > li').click(function(e) { $('ul.navbar-nav > li').removeClass('active'); $(this).addClass('active'); }); $('#logo').click(function(e) { $('ul.navbar-nav > li').removeClass('active'); }) });
.navbar { padding: 0.8rem; background-color: #1C2331; } .navbar-nav li { padding-right: 25px; } .nav-link { font-size: 1.1em !important; font-weight: bold; } .navbar-nav > .active > a { background-color: violet; border-radius: 5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav id="main-navbar" class="navbar navbar-expand-md navbar-dark sticky-top"> <div class="container-fluid"> <!--100% of the screen--> <a id="logo" href="#top"> <img src="Images/logo.svg" alt="Website logo"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"> <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 text-light" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link text-light" href="#portfolio">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link text-light" href="#contact">Contact</a> </li> </ul> </div> </div> </nav>
2 个解决方案
解决方案1
0 2020-09-03 12:05:08
请从<a>标签中删除'text-light'类
将data-spy="scroll"添加到应该用作可滚动区域的元素（通常是<body>元素）。
然后添加带有 id 值或导航栏类名(.navbar)的data-target属性。 这是为了确保导航栏与可滚动区域相连。
请注意，可滚动元素必须与导航栏列表项内的链接 ID 匹配(<div id="section1">匹配<a href="#section1">) 。
需要相对定位：带有data-spy="scroll"的元素需要CSS position属性，值为 "relative" 才能正常工作。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <style> body { position: relative; } .navbar { padding: 0.8rem; background-color: #1C2331; } .navbar-nav li { padding-right: 25px; } .nav-link { font-size: 1.1em !important; font-weight: bold; } .navbar-nav > .active > a { background-color: violet; border-radius: 5px; } </style> </head> <body data-spy="scroll" data-target=".navbar" data-offset="50"> <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#section1">Section 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#section2">Section 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#section3">Section 3</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Section 4 </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#section41">Link 1</a> <a class="dropdown-item" href="#section42">Link 2</a> </div> </li> </ul> </nav> <div id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px"> <h1>Section 1</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="section2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px"> <h1>Section 2</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px"> <h1>Section 3</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="section41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px"> <h1>Section 4 Submenu 1</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="section42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px"> <h1>Section 4 Submenu 2</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> </body> </html>
解决方案2
0 已采纳 2020-09-04 10:50:35
请通过以下方式更正代码：
1)请从标签中删除'text-light'类。 它应该是
<a class="nav-link" href="#about">About</a>
2)将data-spy="scroll"到应该用作可滚动区域的元素（通常是<body>元素）。
<body data-spy="scroll" data-target=".navbar" data-offset="50">
3)请更新 CSS 选择器：
.navbar-nav .active {
background-color: violet;
border-radius: 5px;
}
body { position: relative; } .navbar { padding: 0.8rem; background-color: #1C2331; } .navbar-nav li { padding-right: 25px; } .nav-link { font-size: 1.1em !important; font-weight: bold; } .navbar-nav .active { background-color: violet; border-radius: 5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <body data-spy="scroll" data-target=".navbar" data-offset="0"> <nav id="main-navbar" class="navbar navbar-expand-md navbar-dark sticky-top"> <div class="container-fluid"> <!--100% of the screen--> <a id="logo" href="#top"> <img src="Images/logo.svg" alt="Website logo"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"> <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" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#portfolio">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> </ul> </div> </div> </nav> <div id="about" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px"> <h1>Section 1</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="portfolio" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px"> <h1>Section 2</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="contact" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px"> <h1>Section 3</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> </body>
如何使活动的导航栏链接更改背景颜色？ 引导程序4。
[英]How can I make the active navbar link change background color? Bootstrap 4.
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.