jQuery add class based on page URL

2019-01-13 09:04发布

站内问答 / JavaScript
1649 4 4

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.

4条回答
贪生不怕死
2楼-- · 2019-01-13 09:22

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");
     }
查看更多
0人赞 添加讨论(0) 举报
不美不萌又怎样
3楼-- · 2019-01-13 09:40

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

查看更多
0人赞 添加讨论(0) 举报
叼着烟拽天下
4楼-- · 2019-01-13 09:44

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.

查看更多
0人赞 添加讨论(0) 举报
我命由我不由天
5楼-- · 2019-01-13 09:45

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)