jQuery добавить класс на основе URL страницы

у меня есть думаю - это простой вопрос, но я не могу заставить его работать для жизни меня.

все, что я хочу сделать, это добавить javascript на страницу, которая добавляет класс в контейнер главной страницы на основе URL.

допустим, у меня есть сайт на root.com и следующая структура html (грубо говоря):

<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>

то, что я хочу сделать, это скрипт, который, если страница = (например) root.com/technology, он добавляет класс к основному div. Так что дел теперь будет выглядеть так:

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

Я загрузил jquery, поэтому я хотел бы сделать это таким образом.

10
css javascript jquery url

4 ответов

можно использовать window.location чтобы получить текущий URL, а затем переключиться на основе этого:

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

это использует регулярное выражение, чтобы увидеть, содержит ли URL-адрес определенную фразу (в частности:technology), и если да, добавляет класс в #main элемент.

25

Ну, вот как я бы сделал это:

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

таким образом, вы держите свой код в чистоте, и вы можете легко добавить другой случай.

посмотреть здесь что window.location.pathname средства.

7

использовать расположение встроенный объект для определения полного URL или некоторых его частей.

2

будет что-то вроде ниже поможет? основываясь на другом ответе, просто делая

2