Set my Bootstrap navbar links to be active (with pure JavaScript)
Question
I'm trying to make my navbar links turn active when clicked. I imagine I'd do this by adding the active class when being clicked; however, I'm not sure how to stop the current active link from being active. Also, I'm not sure
let links = document.querySelectorAll('.nav-link');
links.addEventListener('click', function() {
this.classList.add('active');
});
Also, I have this for making the link active; however, I can't get it to run after the html runs, so it doesn't work.
https://jsfiddle.net/ysejr17L/2/
TL;DR
- don't know how to make JS find the currently active link and remove it's active class
- code for making clicked link active loads before HTML, so it doesn't work
2 answers
solution1
1 ACCPTED 2020-09-19 04:55:36
Check out this snippet:
let links = document.querySelectorAll('.nav-link'); for(let i=0; i<links.length; i++){ links[i].addEventListener('click', function() { for(let j=0; j<links.length; j++) links[j].classList.remove('active'); this.classList.add('active'); }); }
body { background: linear-gradient(0.1turn, #673fa6, #e1f5f8, #f6c43c); } nav { opacity: 0.8; } .text-shadow { text-shadow: 5px 5px 15px; }
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <!-- My CSS --> <link rel="stylesheet" href="styles/style.css"> <title>Justice Dunn</title> </head> <body> <nav class="navbar navbar-dark bg-dark fixed-top"> <a class="navbar-brand" href="#"> <img src="node_modules/bootstrap-icons/icons/kanban-fill.svg" width="30" height="30" class="d-inline-block align-top" alt="" loading="lazy"> Justice Dunn </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-link active" href="#bg1">Home</a> <a class="nav-link" href="#bg2">Background</a> <a class="nav-link" href="#bg3">Hobbies</a> <a class="nav-link" href="#bg4">Achievements</a> <a class="nav-link" href="#bg5">The Future</a> <a class="nav-link" href="#bg6">Gallery</a> </div> </div> </nav> <div class="container vh-100 vw-100 d-flex align-items-center" id="bg1"> <div class="container d-flex-inline justify-content-center"> <h1 class="text-center text-shadow display-3">Hello!</h1> <p class="text-center text-shadow h4">I'm Justice Dunn, a 19-year-old developer in Cheyenne, Wyoming.</p> </div> </div> <div class="container vh-100 vw-100 d-flex align-items-center" id="bg2"> <div class="container d-flex-inline justify-content-center"> <h1 class="text-center text-black text-shadow display-3">Background</h1> <p class="text-center text-black mt-3 h5">I decided that I wanted to become a developer for a few reasons.</p> <p class="text-center text-black mt-3 h5">I've always been a creative person, and I've always enjoyed problem solving. Being a developer just seems to be an occupation that naturally incorporates both of those things.</p> </div> </div> <div class="container vh-100 vw-100 d-flex align-items-center" id="bg3"> <div class="container d-flex-inline justify-content-center"> <h1 class="text-center text-black text-shadow display-3">Hobbies</h1> <p>Writing Music</p> <p>Digital Art</p> <p>3D Modeling</p> </div> </div> <div class="container vh-100 vw-100 d-flex align-items-center" id="bg4"> <div class="container d-flex-inline justify-content-center"> <h1 class="text-center text-black text-shadow display-3">Achievements</h1> <p class="text-center h5 mt-3">I don't have a lot of life experience yet, so I'd say my greatest achievement was getting accepted into the Array apprenticeship program!</p> </div> </div> <div class="container vh-100 vw-100 d-flex align-items-center" id="bg5"> <div class="container d-flex-inline justify-content-center"> <h1 class="text-center text-black text-shadow display-3">The Future</h1> <p class="text-center h5 mt-3">After this Array apprenticeship, I want to begin developing apps and write, record, and produce an album.</p> </div> </div> <div class="container vh-100 vw-100 d-flex align-items-center" id="bg6"> <div class="container d-flex-inline justify-content-center"> <h1 class="text-center text-black text-shadow display-3">Gallery</h1> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS and local JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script src="/scripts/script.js"></script> </body> </html>
We are adding click event listener to each element of class .nav-link which at first remove .active class from all the elements and then add class .active to the element which is clicked.
solution2
0 2020-09-19 05:38:08
You could try this also without using a loop on each load.
document.body.addEventListener('click', function(e) { if(e.target.className==='nav-link'){ document.getElementsByClassName('nav-link active')[0].classList.remove('active'); e.target.classList.add('active'); } }); body { background: linear-gradient(0.1turn, #673fa6, #e1f5f8, #f6c43c); } nav { opacity: 0.8; } .text-shadow { text-shadow: 5px 5px 15px; }
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <!-- My CSS --> <link rel="stylesheet" href="styles/style.css"> <title>Justice Dunn</title> </head> <body> <nav class="navbar navbar-dark bg-dark fixed-top"> <a class="navbar-brand" href="#"> <img src="node_modules/bootstrap-icons/icons/kanban-fill.svg" width="30" height="30" class="d-inline-block align-top" alt="" loading="lazy"> Justice Dunn </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-link active" href="#bg1">Home</a> <a class="nav-link" href="#bg2">Background</a> <a class="nav-link" href="#bg3">Hobbies</a> <a class="nav-link" href="#bg4">Achievements</a> <a class="nav-link" href="#bg5">The Future</a> <a class="nav-link" href="#bg6">Gallery</a> </div> </div> </nav> <div class="container vh-100 vw-100 d-flex align-items-center" id="bg1"> <div class="container d-flex-inline justify-content-center"> <h1 class="text-center text-shadow display-3">Hello!</h1> <p class="text-center text-shadow h4">I'm Justice Dunn, a 19-year-old developer in Cheyenne, Wyoming.</p> </div> </div> <div class="container vh-100 vw-100 d-flex align-items-center" id="bg2"> <div class="container d-flex-inline justify-content-center"> <h1 class="text-center text-black text-shadow display-3">Background</h1> <p class="text-center text-black mt-3 h5">I decided that I wanted to become a developer for a few reasons.</p> <p class="text-center text-black mt-3 h5">I've always been a creative person, and I've always enjoyed problem solving. Being a developer just seems to be an occupation that naturally incorporates both of those things.</p> </div> </div> <div class="container vh-100 vw-100 d-flex align-items-center" id="bg3"> <div class="container d-flex-inline justify-content-center"> <h1 class="text-center text-black text-shadow display-3">Hobbies</h1> <p>Writing Music</p> <p>Digital Art</p> <p>3D Modeling</p> </div> </div> <div class="container vh-100 vw-100 d-flex align-items-center" id="bg4"> <div class="container d-flex-inline justify-content-center"> <h1 class="text-center text-black text-shadow display-3">Achievements</h1> <p class="text-center h5 mt-3">I don't have a lot of life experience yet, so I'd say my greatest achievement was getting accepted into the Array apprenticeship program!</p> </div> </div> <div class="container vh-100 vw-100 d-flex align-items-center" id="bg5"> <div class="container d-flex-inline justify-content-center"> <h1 class="text-center text-black text-shadow display-3">The Future</h1> <p class="text-center h5 mt-3">After this Array apprenticeship, I want to begin developing apps and write, record, and produce an album.</p> </div> </div> <div class="container vh-100 vw-100 d-flex align-items-center" id="bg6"> <div class="container d-flex-inline justify-content-center"> <h1 class="text-center text-black text-shadow display-3">Gallery</h1> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS and local JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script src="/scripts/script.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Set link of my navbar active with bootstrap
Pure JavaScript: toggle links active
set link of my navbar and its children active with bootstrap
Remove active class from bootstrap navbar links
pure javascript way to bootstrap navbar dropdown
Can't set class to active in my navbar using Javascript
Bootstrap - Set properly active class on navbar
Why is my bootstrap navbar not showing the active button?
Bootstrap: Links in navbar receive active class too late in the scroll
Pure javascript collapse navbar
Related Tags