Member 13884629 Ответов: 1

(Небольшая заминка) добавить активный класс навигация пункта меню в зависимости от URL с помощью jQuery

Мне удалось это сделать, но у меня была небольшая икота. В настоящее время активный класс был добавлен к текущему URL-адресу, включая ссылку All Watches (возможно, потому, что URL-адрес является URL-адресом домашней страницы).

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

Это и есть HTML-коды.

<div class="tagcloud">
<ul class="tag-widget">
    <li>
    <a href="http://effectiveadvisory.com/wingwah-may/">All Watches</a>
    </li>
    <li>
    <a href="http://effectiveadvisory.com/wingwah-may/product-tag/military/">Military</a>
    </li>
    <li>
    <a href="http://effectiveadvisory.com/wingwah-may/product-tag/diver/">Diver</a>
    </li>
    <li>
    <a href="http://effectiveadvisory.com/wingwah-may/product-tag/pilots/">Pilots</a>
    </li>
    <li>
    <a href="http://effectiveadvisory.com/wingwah-may/product-tag/racing/">Racing</a>
    </li>

</ul>

</div>


Это коды JQuery.

jQuery(document).ready(function($){
$("#custom_html-2 a")
.filter(function(){ 
return location.href.match($(this).attr("href"))
})
.addClass("tag-active");
});


Что я уже пробовал:

Немного погуглил и опубликовал справку в stackoverflow. Но ответа не последовало.

Я думаю, что проблема заключается в функции фильтра. Я думаю, что мне нужно сделать так, чтобы текущий URL-адрес совпадал точно так же, как ссылка href. Но я понятия не имею, как это сделать.

1 Ответов

Рейтинг:
9

Richard Deeming

То match метод[^] принимает регулярное выражение в качестве аргумента и либо возвращает массив, содержащий совпадения, либо null.

Ваш href это не регулярное выражение, но поскольку оно не содержит никаких специальных символов, оно будет действовать как одно из них. Он не содержит никаких якорных предложений, так что ваш match вызов вернет совпадение, если URL - адрес содержит указанное значение.

Поскольку все показанные вами URL-адреса содержат URL-адрес "все часы", он всегда будет помечен как активный.

Чтобы сравнить полный URL-адрес, используйте оператор равенства:

$(function(){
    $("#custom_html-2 a").filter(function(){ return location.href === this.href; }).addClass("tag-active");
});

Member 13884629

Спасибо это работает.

Мне интересно, откуда вы, ребята, знаете, что означает этот синтаксис?
Есть ли какая-нибудь шпаргалка или вы, ребята, просто знаете ее по опыту?

Richard Deeming

Главным образом опыт. Много-много опыта! :)

MDN-это довольно хорошая ссылка:
Ссылка на JavaScript - JavaScript | MDN[^]