Как такое сделать через js?

Question

[sabanovvv]

Как сделать так через javascript - выделение ссылки №1(ДЛЯ ПРИМЕРА) определенным цветом, если страница главная?

Answer 1

[FedorK]

Это, конечно, зависит от того, как устроено ваше приложение, и как в нем организована навигация.
Предложу такое решение:

Для относительных ссылок вида href="/front"

$(function() {
    // получаем относительный адрес текущей страницы
    var url = window.location.pathname;
    // ищем в меню ссылку с таким адресом и раскрашиваем ее
    $('#menu a[href="' + url + '"]').css('color', 'red');
});

Для абсолютных ссылок вида href="httр://www.test.ru/front"

$(function() {
    // получаем абсолютный адрес текущей страницы
    var url = window.location.href;
    // ищем в меню ссылку с таким адресом и раскрашиваем ее
    $('#menu a[href="' + url + '"]').css('color', 'red');
});

Comments

[sabanovvv]

$('#menu a[href="' + url + '"]').addClass('active');
а как здесь?
у меня сайт например www.test.ru/front(главная страница), и там есть ссылка

[FedorK]

@sabanovvv Ну вот в url будет ваш front. Если требуется просто раскрасить ссылку, то вместо addClass, можно написать .css('color', 'red');

[FedorK]

@sabanovvv Я подправил свой ответ, вы можете использовать один из приведенных мной вариантов в зависимости от того, какой тип ссылок используется у вас на сайте.

[sabanovvv]

выдаешь ошибку
uncaught referenceerror: front is not defined

$(function() {
// получаем абсолютный адрес текущей страницы
var url = window.location.href;
// ищем в меню ссылку с таким адресом и раскрашиваем ее
$('.nav a[href="' + front + '"]').css('color', 'red');
});

[FedorK]

@sabanovvv Вы, видимо, не поняли сути кода. Мой код полностью автоматический. Вы можете его не менять. Он сравнивает адрес текущей страницы со всеми ссылками в меню. Ссылка с адресом текущей страницы раскрашивается в красный цвет.
Если хотите жестко задать конкретную ссылку, то пишите так: $('.nav a[href="/front"]').css('color', 'red');

Answer 2

[Назар Мокринский]

if (location.pathname == '/') {
    //Тут изменить цвет ссылки
}