change class on the basis of URL using jquery

Question

I am working in wordpress, I am using jquery to add remove class in body tag.

I want to apply class "home" to homepage and for other pages I want to apply "innerpage" class to body tag.

following is my code.

$(document).ready(function(){
var loc = window.location.href; // returns the full URL
//alert(loc);   
if (loc == "http://n.net/") 
    {
        $('body').removeClass('innerpage').addClass('home');
        $('.widget-area').removeAttr('style');

    }else {
        $('body').removeClass('home').addClass('innerpage');
        }


});

but it is not working if the url comes like: http://n.net/?=s

I think still u have not get my query. e.g stage 1: suppose if I have my page URL is n.net then the home page css gets apply to body. stage 2: Suppose if my URL is n.net/innepage, then innerpage css gets apply stage 3: but if my URL is n.net/?s= at this time home page css shld get apply which is not happening — Dhananjay
– Dhananjay, Commented Sep 19, 2013 at 8:16

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

If you only want to match the path, use pathname instead:

var path = window.location.pathname;
if(path === "/") {
  // Homepage
  $('body').removeClass('innerpage').addClass('home');
  $('.widget-area').removeAttr('style');
}
else {
  // Other pages
  $('body').removeClass('home').addClass('innerpage');
}

This will match for:

http://n.net/

http://n.net

http://n.net/?a=1

http://n.net/?a=1#hash

Have a look at all the properties of the location object, it contains a lot more than just href

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 19, 2013 at 8:11

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

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

4 Comments

Reinstate Monica Cellio Over a year ago

I do it myself. Sometimes questions seem so clear and then you realise it actually means something completely different!

Dhananjay Over a year ago

@Archer : really sorry, but that the issue I am facing. I have mention 3 stages. I have issue where 3rd stage comes in. I dont want to make it hardcoded. URL name can be anything.

Dhananjay Over a year ago

@RGraham: I tried it, it works only for innerpage not for Home page, because for homepage there is not "/" at the end of URL

Dhananjay Over a year ago

@RGraham: Thanks alot, it was my mistake. I paste ur code again. Its working as per expected. Thanks again.

Reinstate Monica Cellio · Accepted Answer · 2013-09-19 08:15:05Z

0

If you just want the URL, without the querystring, use this...

window.location.href.split("?")[0];

answered Sep 19, 2013 at 8:15

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

Comments

Manu M · Accepted Answer · 2013-09-19 08:49:10Z

0

Try this,

$(document).ready(function(){
var loc = window.location.href; // returns the full URL
//alert(loc);   
if (loc.split('.net')[1] == '/' || loc.split('.net')[1] == '') 
{
    $('body').removeClass('innerpage').addClass('home');
    $('.widget-area').removeAttr('style');

}else {
    $('body').removeClass('home').addClass('innerpage');
    }


});

edited Sep 19, 2013 at 8:49

answered Sep 19, 2013 at 8:20

Manu M

1,0645 silver badges18 bronze badges

2 Comments

Dhananjay Over a year ago

Its working only for innerpage, not for home page and any other page

Manu M Over a year ago

sorry i edited it.. there is change in the split function... try now

Collectives™ on Stack Overflow

change class on the basis of URL using jquery

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related