jQuery add class based on page URL

Question

I have what I think is a simple question but I can't get it to work for the life of me.

All I want to do is add some javascript to the page that adds a class to the main page container based on the URL.

Let's say I have a site at root.com and the following html structure (loosely 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 want to do is a script that, if the page = (for example) root.com/technology, it adds a class to the main div. So the div would now look like:

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

I've loaded jquery, so I'd like to do it that way.

Alex Vidal · Accepted Answer · 2012-04-02 20:13:46Z

28

You can use window.location to get the current URL, and then switch based on that:

$(function() {
  var loc = window.location.href; // returns the full URL
  if(/technology/.test(loc)) {
    $('#main').addClass('tech');
  }
});

This uses a regular expression to see if the URL contains a particular phrase (notably: technology), and if so, adds a class to the #main element.

answered Apr 2, 2012 at 20:13

Alex Vidal

4,10822 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Daniel Ramirez-Escudero Over a year ago

@alex vidal It works fine for me but it's loading a bit later than normal. I'm using this action to maintain a sub menu open once the user is in a determined Therefore the user can see after 1-2secs how the sub category menu opens. I would like it to do this instantly, how can I avoid this?

danielmeade Over a year ago

How can this be modified to work if you at the route (homepage) of the site?

Terence Over a year ago

Thanks! can you tell me what does .test do?

Tammy Tee · Accepted Answer · 2018-11-20 19:54:07Z

8

Well, here is how I would do it:

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

This way, you keep your code clean and you can easily add another case.

See here what window.location.pathname means.

edited Nov 20, 2018 at 19:54

Tammy Tee

1031 silver badge11 bronze badges

answered Apr 2, 2012 at 21:05

Florian Margaine

61.2k15 gold badges94 silver badges120 bronze badges

3 Comments

Matt Martin Over a year ago

I like this because, as you say, you can easily add another case without mucking things up. But I can't get it to work...

IE5Master Over a year ago

I like this answer better then the selected 'best' answer. Switch statements are way more clean then writing out conditionals.

Oneezy Over a year ago

@MattMartin that's probably because you need to add break; at the end of each case. That was the case for me.. lol

DG3 · Accepted Answer · 2012-04-02 20:11:58Z

3

would something like below help? based on other answer, just by doing

console.log(window.location)

, you can wealth wealth of information related to your location object

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

answered Apr 2, 2012 at 20:11

DG3

5,32617 gold badges54 silver badges63 bronze badges

Comments

kirilloid · Accepted Answer · 2012-04-02 20:09:35Z

2

Use location built-in object to determine full URL or some parts of it.

answered Apr 2, 2012 at 20:09

kirilloid

14.4k6 gold badges42 silver badges54 bronze badges

1 Comment

Matt Martin Over a year ago

Clearly this is correct, but it doesn't completely answer my question of how to do it.

myhackinfo · Accepted Answer · 2021-03-05 05:59:15Z

0

      $(function(){
        var cUrl = window.location.href;
         $(".product-type-swatches__list a").each(function(){
                 if ($(this).attr("href") == cUrl){
                         $(this).addClass("is-selected");
                 }
         });
    });

answered Mar 5, 2021 at 5:59

myhackinfo

393 bronze badges

Collectives™ on Stack Overflow

jQuery add class based on page URL

5 Answers 5

3 Comments

3 Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

3 Comments

Comments

1 Comment

Comments

Linked

Related