Jquery: динамическое изменение <class>из <link>в зависимости от пути

Question

Мы хотим добавить класс по ссылке в зависимости от window.location.pathname

наш HTML-код:

  <nav>
    <a href="index.php">Home</a>
    <a href="company.php">Company</a>
    <a href="products.php">Products</a>
    <a href="technical.php">Technical</a>
    <a href="services.php">Services</a>
    <a href="contactus.php">Contact Us</a>
  </nav>

и URL документа: www.nicadpower.com / index.php , и мы сделали

var page_name = window.location.pathname.substring(1);

после получения / знания пути к 'index.php' мы хотим, чтобы jquery выполнял свои трюки, сравнивая 'page_name' с href и если это равносильно добавлению class = "current"

сделать наш HTML-код таким, как этот

  <nav>
    <a href="index.php" class="current">Home</a>
    <a href="company.php">Company</a>
    <a href="products.php">Products</a>
    <a href="technical.php">Technical</a>
    <a href="services.php">Services</a>
    <a href="contactus.php">Contact Us</a>
  </nav>

Answer 1

Для этого вам может вообще не понадобиться JavaScript, см. Пример в конце.

Вы ищете "атрибут равно селектору" , или, возможно, атрибут "оканчивается на" селектор нет, селектор равно работает :

// The equals selector
$('nav a[href="' + page_name + '"]').addClass('current');

// The ends-with selector
$('nav a[href$="' + page_name + '"]').addClass('current');

"Атрибут равно селектору" CSS 2.1 и широко поддерживается, так что вы можете сделать это вообще без JavaScript, просто используя таблицу стилей. Селектор end-with CSS3 и, вероятно, не так хорошо поддерживается, особенно если вам не нужна поддержка старых браузеров.

Вот пример страницы с использованием jQuery и CSS. Версия CSS с использованием селектора «атрибуты равно» отлично работает на IE7 и выше, Firefox, Chrome, Opera и Safari. (Бит CSS не работает в IE6, quelle shock.)

Answer 2

$("a[href='" + page_name + "']").addClass("current");

Это выберет элемент a с требуемым значением атрибута href и добавит к нему класс. Смотрите пример скрипки здесь .