Как добавлять класс блоку в зависимости от url?

Question

[Alexander Lashchevsky]

Здравствуйте!
При загрузке страницы необходимо сделать проверку url, и если в url содержится определённые символы, то к одному из блоков на странице нужно добавить новый class. Если конкретнее:
Есть какая-нибудь страница с адресом вроде:website.ru/page
А если адрес страницы выглядит следующим образом:
website.ru/page#qwerty
...то при загрузке страницы к блоку div class="blockclass" нужно добавить ещё один class.

Будте добры, покажите пример кода, реализующего данную работу...
Спасибо!

С уважением,
Александр.

Answer 1

[Юрий Лобанов]

$(document).ready(function(){
  if(window.location.hash == '#qwerty'){
    $('.blockclass').addClass('class');
  }
});

Comments

[Alexander Lashchevsky]

Да, спасибо Вам большее!
Только в
$('blockclass').addClass('class');
перед blockclass нужно поставить точку, а так всё замечательно, благодарен!

[Юрий Лобанов]

@Lashchevsky а я уже исправил (до Вашего замечания), сам заметил опечатку.

[Alexander Lashchevsky]

@iiil а не подскажете, как сделать тоже самое, только проверку не по #qwerty, т.е. не по hashу, а вообще, если заданные символы встречаются где-то в url, например website.ru/qwerty-page.html

[Юрий Лобанов]

@Lashchevsky

$(document).ready(function(){
  if(window.location.href.indexOf('qwerty')){
    $('.blockclass').addClass('class');
  }
});

Вы бы начинали уже потихоньку учить js. Все эти вещи легко писать самому )

[Alexander Lashchevsky]

@iiil спасибо. Начал бы, да времени нет. :(
Но я уже где-то тут на тостере обещал, что когда закончу проект - буду учить. :)

[Alexander Lashchevsky]

Юрий Лобанов: извините за некропостинг, но вариант проверки урла, изложенный в комментарии, не работает. Вне зависимости от того, содержит ли url 'qwerty' или нет, действие добавления класса 'class' для 'blockclass' выполняется в любом случае. Изучая stackoverflow, решил проблему небольшим изменением - добавлением в скрипт > -1. Понятия не имею, что это значит и зачес это нужно, но только в таком случае проверка действительно выполняется.

$(document).ready(function(){
  if(window.location.href.indexOf('qwerty') > -1){
    $('.blockclass').addClass('class');
  }
});

[sanek42]

Огромное спасибо, 5 часов поиска, 10 километров г.... кода перечитанного. А тут 3 строчки. Просто от всей души спасибище человечище

Answer 2

[Евгений Петров]

Есть ещё такая штука — псевдокласс :target. То есть если в адресе хэш совпадает с id (для автоматической прокрутки к которому он также предназначен), то блок можно оформить по-другому.

Comments

[Alexander Lashchevsky]

Интересное решение, спасибо.
Тоже можно было бы попробовать, но в моём случае оно не актуально, так как id должн быть уникальным, а у меня присутствуют несколько блоков, которые должны подвергаться изменениям при нужном url.

[Юрий Лобанов]

@Lashchevsky Вы мыслите чуть шире, и тогда это решение тоже подойдет :) Оберните Ваши несколько элементов в один блок с id="qwerty" или присвойте id="qwerty" тегу body, если блоки по всей странице раскиданы.