jQuery根据页面URL /名称更改具有ID或元素的元素的类

Question

Here is my code

HTML

<div id="header-content" class="header-content">...</div>

Jquery

    $( document ).ready(function() {



      var loc = window.location.href; // returns the full URL
      if(/$/.test(loc)) { // If Empty or if just home URL
        $('#header-content').addClass('home-page');
        //Remove All Other Classes
        $('#header-content').removeClass('start-here');
        $('#header-content').removeClass('work-with-me');
      }
      if(/start-here$/.test(loc)) { // if page = root/start-here/
        $('#header-content').addClass('start-here');
        //Remove All Other Classes
        $('#header-content').removeClass('home-page');
        $('#header-content').removeClass('work-with-me');
      }
      if(/work-with-me$/.test(loc)) { // if page = root/work-with-me/
        $('#header-content').addClass('work-with-me');
        //Remove All Other Classes
        $('#header-content').removeClass('home-page');
        $('#header-content').removeClass('start-here');
      }


    });

URL Example: http://www.somedomain.com/the-page/

What I'd like to do is have the script identify the text "the-page" in the url and if it's a match assign the class. As you can see in my sample jquery code, I'm trying to assign classes to the home page, start-here page and work-with-me page.

I'm not sure how to modify the above Jquery so it will work with the URL Example format.

As well how would I detect if it was the index page and the URL looked like this: http://www.somedomain.com/ with no page name on the end?

Answer 1

Well, assuming the domain is known, it should be doable with this:

//you'll of course want to get this via window.location.href instead:
var exLoc = "http://www.somedomain.com/the-page/";

var root = "somedomain.com";
var end = exLoc.slice(exLoc.lastIndexOf(root)+root.length);

//end is your "text" at the end of your domain (somedomain.com in this case)

Which, using your example would look something like:

$( document ).ready(function() {

  var loc = window.location.href; // returns the full URL
  var root = "somedomain.com";
  var end = loc.slice(loc.lastIndexOf(root)+root.length);

  if(end.length <= 0) { // If Empty or if just home URL
    $('#header-content').addClass('home-page');
    //Remove All Other Classes
    $('#header-content').removeClass('start-here');
    $('#header-content').removeClass('work-with-me');
  }
  if(end === "/start-here/") { // if page = root/start-here/
    $('#header-content').addClass('start-here');
    //Remove All Other Classes
    $('#header-content').removeClass('home-page');
    $('#header-content').removeClass('work-with-me');
  }
  if(end === "/work-with-me/") { // if page = root/work-with-me/
    $('#header-content').addClass('work-with-me');
    //Remove All Other Classes
    $('#header-content').removeClass('home-page');
    $('#header-content').removeClass('start-here');
  }


});