Open In App
Related Articles

How to have the class=“selected” depending on what the current page/url is ?

Improve Article
Save Article
Like Article

Having class = “selected” depending on what page / URL is. This concept is very important especially when designing a navbar for a website so that visitors on the website know on which page of the site they are on

Approach: To have class=” selected” depending on what the current page/URL is :

  • Write your HTML code.
  • Write the CSS for the selected class.
  • In javascript, Find the current location of your page using location.href .
  • Now save all the a tags in a variable lets say “Items” using document.querySelector function.
  • Iterate over the Items and compare its location with the current page URL.
  • If the Items location matches with the current location of the page the add the current a tag class to the selected class.


const currentLocation = location.href

Example: This code should be pasted in all the 4 files.


      a {
        color: #000;
        text-decoration: none;
      .nav {
        padding: 10px;
        border: solid 1px #c0c0c0;
        border-radius: 5px;
        float: left;
      .nav li {
        list-style-type: none;
        float: left;
        margin: 0 10px;
      .nav li a {
        text-align: center;
        width: 55px;
        float: left;
      .nav li a.selected {
        background-color: green;
        color: #fff;
        font-weight: bold;
    <ul class="nav">
      <li><a href="home.html">Home</a></li>
      <li><a href="gfg.html">GFG</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
  <script type="text/javascript">
    const currentLocation = location.href;
    const Items = document.querySelectorAll("a");
    const Length = Items.length;
    for (let i = 0; i < Items.length; i++) {
      if (Items[i].href === currentLocation) {
        Items[i].className = "selected";


Last Updated : 21 Apr, 2021
Like Article
Save Article
Similar Reads
Related Tutorials