Применение стиля к активной гиперссылке без присвоения каждой гиперссылке класса

Question

Я хочу, чтобы пользователи знали, на какой странице они находятся, выделив гиперссылку.

Я не использую список кнопок, если это имеет значение (<li>), я просто использую ссылки.

Я не хочу давать каждой ссылке класс на каждой странице, чтобы определить, активна она или нет.

Есть ли способ сделать это, не давая каждой активной ссылке класс?

Я изучил эту проблему и, насколько я вижу, jQuery может быть возможной, но я бы предпочел использовать ее, поскольку я не знаком с jQuery. Если кто-нибудь знает о каких-либо решениях jQuery, я буду рад их рассмотреть!

Какие-нибудь автоматические активные детекторы ссылок о? :)

Answer 1

Я думаю, что это может сработать, но я не проверял это.
Он использует jQuery и довольно читабелен.
Однако вы должны обработать имя пути, чтобы получить только часть, необходимую для совпадения, в функции hrefHasPath.

var links = $("#links a");               // gets all links within something with an id of "links"
var pathname = window.location.pathname; // current url
//for each link see if the href has something in the path, and if it does add a css class
$.each(links, function(){ 
    if(hrefHasPath($(this).attr("href"))){
        $(this).addClass("highlight");
    } 
});

function hrefHasPath(href){
    return (href.indexOf("pathname ") != -1);
}

Answer 2

Вверху головы я подхожу к этому, собирая все <a> элементы (или элементы в определенной группе, или в классе, например, навигацию) и проверяя, является ли ТЕКУЩИЙ URL == a.href* 1003. *

Примерно так:

var a = document.getElementsByTagName('a');

for (var idx= 0; idx < a.length; ++idx){
    if(a[idx].href == document.URL){
        // some styles here to the link background
        a[idx].style.backgroundColor = 'red';  
    }
}

Если вы добавите jQuery, это сделает ваш селектор проще для стилей и тому подобного.