Using jQuery to dynamically add a class depending on the current page's URL

Question

Using jQuery to dynamically add a class depending on the current page's URL

I'm facing a challenge with what seems like a straightforward question, but I just can't seem to figure it out.

All I am trying to accomplish is to incorporate some javascript into the webpage that assigns a class to the main page container based on the URL.

Let's take, for example, a site located at root.com and having the following HTML structure (roughly speaking):

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  </head>
  <body>
    <div id="main" class="wrapper">
      Blah, blah, blah
  </body>
</html>

What I aim to achieve is a script that, when the page equals something like root.com/technology, will apply a class to the main div. This would result in the div appearing as follows:

     <div id="main" class="wrapper tech">

Since I have loaded jQuery, I prefer to use it for this task.

javascript jquery css url

Answer 1

Answer №1

To retrieve the current URL, you can utilize window.location and create a conditional based on its value:

$(function() {
  var currentURL = window.location.href; // obtains the complete URL
  if(/products/.test(currentURL)) {
    $('#main').addClass('highlight');
  }
});

This method employs a regular expression to check if the URL includes a specific term (in this case: products), and if it does, it applies a class to the #main element.

Answer 2

To retrieve the current URL, you can utilize window.location and create a conditional based on its value:

$(function() {
  var currentURL = window.location.href; // obtains the complete URL
  if(/products/.test(currentURL)) {
    $('#main').addClass('highlight');
  }
});

This method employs a regular expression to check if the URL includes a specific term (in this case: products), and if it does, it applies a class to the #main element.

Answer 3

Answer №2

If I were to tackle this problem, here's the approach I would take:

switch (window.location.pathname) {
    case '/technology':
        $('#main').addClass('tech');
        break;
    case '/something':
        // code block
        break;
    case '/somestuff':
        $('#main').addClass('some');
        break;
    default: 
        // code block
}

By following this method, you maintain a tidy codebase and have the flexibility to add new cases effortlessly.

To understand more about window.location.pathname, refer to this resource.

Answer 4

If I were to tackle this problem, here's the approach I would take:

switch (window.location.pathname) {
    case '/technology':
        $('#main').addClass('tech');
        break;
    case '/something':
        // code block
        break;
    case '/somestuff':
        $('#main').addClass('some');
        break;
    default: 
        // code block
}

By following this method, you maintain a tidy codebase and have the flexibility to add new cases effortlessly.

To understand more about window.location.pathname, refer to this resource.

Answer 5

Answer №3

Could a solution like the following be beneficial? As mentioned in another response, simply by executing

console.log(window.location)

, you can access a plethora of information pertaining to your location object

     if(window.location.href=== "root.com/technology") {
         $("#main").addClass("tech");
     }

Answer 6

Could a solution like the following be beneficial? As mentioned in another response, simply by executing

console.log(window.location)

, you can access a plethora of information pertaining to your location object

     if(window.location.href=== "root.com/technology") {
         $("#main").addClass("tech");
     }

Answer 7

Answer №4

Utilize the location object in JavaScript to extract the complete URL or specific components of it.

Answer 8

Utilize the location object in JavaScript to extract the complete URL or specific components of it.

Answer 9

Answer №5

      $(function(){
        var currentUrl = window.location.href;
         $(".swatch-type-selector__list a").each(function(){
                 if ($(this).attr("href") == currentUrl){
                         $(this).addClass("active-swatch");
                 }
         });
    });

Answer 10

      $(function(){
        var currentUrl = window.location.href;
         $(".swatch-type-selector__list a").each(function(){
                 if ($(this).attr("href") == currentUrl){
                         $(this).addClass("active-swatch");
                 }
         });
    });

Using jQuery to dynamically add a class depending on the current page's URL

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Webpack can generate separate compiled files in addition to the bundle

Guide on integrating module css with typescript in a Gatsby project

Drop-down functionality in Bootstrap Form becomes unresponsive after screen width is decreased

Modify content of elements by clicking on them with jQuery

Determine whether a variable includes an alphabetic character

What is the best way to give this CSS button a "highlight" effect when it is clicked using either CSS3 or JavaScript?

Troubleshooting: Issue with Button Layout in Ionic's ItemSliding Component

The Uglify task in Grunt/NPM is having trouble with this particular line of JavaScript code

The process of accessing XMLHttpRequest in Angular

develop the following application and execute the npm run dev command, but encounter the error message: "Command failed with exit code 1."

Exploring the capabilities of a Vue.js component

What is the best way to extract multiple values from an input field using jQuery?

Is there a way to add items to an array in React's state using the setState method?

Why does parsing the GET response fail intermittently with Jquery, ajax, and JSON?

Ending a tag every x cycle of iteration within Svelte

Retrieve the element located within a "block" element that is relative to the user's click event, without the

stop the interval if conditions are not satisfied

"Troubleshooting issue with Ajax call failure to local file on Windows phone 8 when using Cordova version 2.3.0rc

Gulp JS task is generating a NodeError due to the callback being triggered more than once

Dynamic loading with asynchronous JavaScript and XML, along with the ability to drag and drop files