javascript - jQuery add class based on page URL

Question

Welcome To Ask or Share your Answers For Others

javascript - jQuery add class based on page URL

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - jQuery add class based on page URL

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T02:47:38+0000

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.

Categories

javascript - jQuery add class based on page URL

javascript - jQuery add class based on page URL

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags