jQuery добавить класс на основе URL страницы - PullRequest
Новая
       3

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

10 голосов
/ 03 апреля 2012

У меня есть то, что я считаю простым вопросом, но я не могу заставить его работать на всю жизнь.

Все, что я хочу сделать, - это добавить немного 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 теперь будет выглядеть так: 

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

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

Ответы [ 4 ]

25 голосов
/ 03 апреля 2012

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

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

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

8 голосов
/ 03 апреля 2012

Хорошо, вот как я бы это сделал: 

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

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

См. здесь что означает window.location.pathname.

2 голосов
/ 03 апреля 2012

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

console.log (window.location)

, вы можете получить огромное количество информации, связанной с вашим объектом местоположения 

     if(window.location.href=== "root.com/technology") {
         $("#main").addClass("tech");
     }
2 голосов
/ 03 апреля 2012

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...