How to get the Highlighted/Selected text in JavaScript?

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

Last Updated : 21 Apr, 2021

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.

Syntax:

const currentLocation = location.href

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

HTML

<html>
  <head>
    <style>
      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;
      }
    </style>
  </head>

  <body>
    <ul class="nav">
      <li><a href="home.html">Home</a></li>
      <li>|</li>
      <li><a href="gfg.html">GFG</a></li>
      <li>|</li>
      <li><a href="about.html">About</a></li>
      <li>|</li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </body>
  <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";
      }
    }
  </script>
</html>

Output:

How to get the Highlighted/Selected text in JavaScript?

N

namanaggarwal1

Improve

Article Tags :

Similar Reads

How to Select the Next Element in CSS ?

Combinators: When classes are combined, they become more specific. This allows you to target classes further down in your template without affecting other elements. Selectors can be combined into a combinator: Combinator of Descendent, Child, Sibling, and General Sibling. The Descendent Combinator i

How to get the Highlighted/Selected text in JavaScript?

There may be a need to find out the text selected/highlighted by the user. It can be done very easily using the window and document objects and their properties. Handling selected text is different for different browsers. The ways to get selected text are shown below: Method 1: window.getSelection p

How to checks the current selection against an expression using jQuery ?

The task is to check the current selection against an expression using jQuery. jQuery is a lightweight and fast JavaScript that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. jQuery is widely famous for its motto of â€œWrite

How to specify that an option should be pre-selected when the page loads in HTML5?

The <option> tag defines an option in a select list. The <option> tag is generally used with the value attribute to specify which value should be sent to the server for further processing. When a drop-down list is created using the <select> element, the first option or the first ch

How to Add an Active Class to the Current Element Using JavaScript?

We can make use of JavaScript to add an active class to the current element by directly manipulating its class list. This involves identifying the element that triggered the interaction, removing the active class from any previously active elements, and then applying the active class to the current

How to set the focus on drop-down list automatically when the page loads in HTML5?

The purpose of this article is to focus the drop-down list automatically when the page loads in HTML5. The <select> autofocus attribute is a boolean attribute that specifies that the drop-down list should automatically get focus when the page loads. Syntax: <select autofocus> Example: Th

How to change the color of selected text using CSS ?

The colour of selected text can be easily changed by using the CSS | ::selection Selector. In the below code, we have used CSS ::selection on <h1> and <p> element and set its colour as yellow with green background. Below example implements the above approach: Example: html <!DOCTYPE h

Define Selectors in jQuery and What are the types of selectors?

Selectors in jQuery: Selectors in jQuery are functions that primarily focus on selecting particular HTML elements and modifying them as per the action they need to perform. These selectors select particular HTML elements as per their name, element type, class, id, attributes or values of attributes,

How can Selenium select each div separately that have the same class?

When working with Selenium, there may be situations where you need to interact with multiple elements on a webpage that share the same class. For example, consider a web page where several div elements have the same class, and you need to perform operations like clicking, retrieving text, or interac

How to Select All Elements without a Given Class using jQuery?

In jQuery, selecting elements that do not have a specific class can be useful when you want to manipulate or style all elements except those matching a certain condition. This approach allows for more precise control over the elements in various dynamic situations.Here we have some common approaches