Применить класс на основе страницы

Question

Мне нужно применить класс «.selected» к элементу навигации, когда пользователь находится на соответствующей странице, чтобы, когда пользователь нажимает «Продукты», он переходил на страницу продуктов, но элемент навигации «Продукты» оставался выбранным. , Как я могу сделать это с помощью jQuery? Я полагаю, мне нужно получить URL страницы и применить стиль к соответствующему элементу навигации, правильно?

Answer 1

Я предполагаю, что вы будете использовать какую-то систему AJAX, в которой вы не будете перезагружать меню при каждом щелчке, в противном случае это обязательно должно быть сделано на стороне сервера. Если нет, вы можете использовать следующее

HTML

<ul id='main'>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
</ul>​​​

Javascript:

$('ul#main > li').click(function() {
        $('ul#main > li.selected').removeClass('selected');
        this.setAttribute('class','selected');
}​​​​​​​​​);​

Вот ссылка для проверки: http://jsfiddle.net/6zpJX/

Answer 2

Вот простой пример, если вы хотите сопоставить весь URL ('http://example.com/mydir/mypage.html'):

  $(function() {
    var url = window.location;
    $('a[href="' + url + '"]').addClass('selected');
  });

или, чтобы соответствовать пути (' /mydir/mypage.html'):

  $(function() {
    var url = window.location.path;
    $('a[href="' + url + '"]').addClass('selected');
  });

Answer 3

при условии, что элемент, который вы хотите оформить, .selected имеет идентификатор, идентичный HTML-файлу, который в настоящее время находится в браузере:

$(document).ready(function() {
  ...
  var page = window.location.href.match(/\/(\w+).htm/)[1];
  $('#' + page).addClass('selected');
  ...