How to set active class to nav menu from bootstrap ?

14 Dec, 2020
To set the active class to the navigation menu dynamically by scrolling or clicking on the navigation links, the active class is to be set on each section depending on the position of the webpage. To add methods and variables, JavaScript is used. To perform some action, the functions can be called on some events such as click and scroll.
Example: This example implements the approach mentioned above.
HTML
<!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.3.1/css/bootstrap.min.css"        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"        crossorigin="anonymous">      <!-- jQuery first, then Popper.js, then Bootstrap JS -->    <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.7/umd/popper.min.js"        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"        crossorigin="anonymous">    </script>      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"        crossorigin="anonymous">    </script>        <style>        html {            /*For smooth scrolling behavior*/            scroll-behavior: smooth;        }          #home,        #section1,        #section2,        #section3,        #section4 {            height: 70vh;            text-align: center;            font-size: 20px;            padding-top: 50px;        }          #home {            background-color: lightgreen;        }          #section1 {            background-color: lightcoral;        }          #section2 {            background-color: cyan;        }          #section3 {            background-color: lightsalmon;        }          #section4 {            background-color: lightseagreen;        }    </style></head>  <body>    <!-- Creating Nav Bar  -->    <section id="navigation">        <nav class="navbar navbar-expand-sm             navbar-dark bg-dark fixed-top">            <div class="container">                <a class="navbar-brand" href="#"                     style="color:greenyellow;">                    Geeks for Geeks                </a>                  <div class=" navbar-default">                    <ul class="navbar-nav ml-auto">                        <li class="nav-item ">                              <!--Initially active class                                 is set to home link -->                            <a class="nav-link active" href="#">                                Home                            </a>                        </li>                          <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">                            <a class="nav-link" href="#section4">                                Section 4                            </a>                        </li>                    </ul>                </div>            </div>        </nav>          <br><br>        <!-- creating sections -->        <section id="home" class="page-section">            Home </section>        <section id="section1" class="page-section">            Section-1 </section>        <section id="section2" class="page-section">            Section-2 </section>        <section id="section3" class="page-section">            Section-3 </section>        <section id="section4" class="page-section">            Section-4 </section>          <!-- JavaScript code -->        <script>              /* Code for changing active             link on clicking */            var btns =                 $("#navigation .navbar-nav .nav-link");              for (var i = 0; i < btns.length; i++) {                btns[i].addEventListener("click",                                      function () {                    var current = document                        .getElementsByClassName("active");                      current[0].className = current[0]                        .className.replace(" active", "");                      this.className += " active";                });            }              /* Code for changing active             link on Scrolling */            $(window).scroll(function () {                var distance = $(window).scrollTop();                $('.page-section').each(function (i) {                      if ($(this).position().top                         <= distance + 250) {                                                      $('.navbar-nav a.active')                                .removeClass('active');                              $('.navbar-nav a').eq(i)                                .addClass('active');                    }                });            }).scroll();        </script>    </section></body>  </html>
Output:
While scrolling the webpage:
While clicking on nav links:
Bootstrap-4
Bootstrap-Misc
HTML-Misc
Bootstrap
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
How to set vertical alignment in Bootstrap ?
Tailwind CSS vs Bootstrap
How to toggle password visibility in forms using Bootstrap-icons ?
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property