Задать вопрос
Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Сниппеты » JS Сниппеты » Подсветка активного пункта меню на jQuery
https://phlebolog.com флебологов.

Подсветка активного пункта меню на jQuery

     31.05.2013    сниппет, jquery    JS Сниппеты    26313

Довольно часто встаёт проблема подсветки активного пункта в меню.
Проблема решается одной строчкой кода)
Подсветка активного пункта меню на jQuery

HTML:
<ul class="navigation">
    <li><a href="/">Далеко-далеко за словесными.</a></li>
    <li><a href="/news/">Обеспечивает, текста, о.</a></li>
    <li><a href="/111/">Подзаголовок, они там!</a></li>
    <li><a href="/222/">Вершину, моей, алфавит.</a></li>
    <li><a href="/333/">Злых, предложения, по всей.</a></li>
</ul>

jQuery
jQuery(document).ready(function($) {
    $('.navigation a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});

Теперь при переходе к примеру на страницу /news/ к соответствующей ссылке будет добавлен класс active

48 комментариев

shamanim
Юзер

shamanim - 1 июня 2013 20:34 -

замечательно, а как на JQUERY сделать это:

https://dle-faq.ru/uploads/comments/2296/temp.jpg
vlavik007
Юзер

vlavik007 - 27 июня 2013 17:17 -

А если мне нужно, что бы класс "active" дописывался не к ссылке "a" а к списку "li", то что нужно в коде дописать?
TheImDim
Юзер

TheImDim - 27 июня 2013 17:45 -

Попробуй


jQuery(document).ready(function($) {
    $('.navigation a[href^="/' + location.pathname.split("/")[1] + '"]').parent("li").addClass('active');
});


При условии что <li> родитель <a>
TheImDim
Юзер

TheImDim - 27 июня 2013 17:56 -

vlavik007
Юзер

vlavik007 - 27 июня 2013 18:33 -

а если ссылка ведёт на стат. страницу с .html на конце, тогда как?)
TheImDim
Юзер

TheImDim - 27 июня 2013 18:41 -

А какая разница?


<li><a href="/yourpage.html/">Название пункта меню</a></li>
vlavik007
Юзер

vlavik007 - 27 июня 2013 19:25 -

выбивает ошибку. Пишет что нет такой страницы.
ravchik
Юзер

ravchik - 12 сентября 2013 08:39 -

на главной странице сайта все ссылки делаются активными.. как исправить?
rus mod
Юзер

rus mod - 17 февраля 2016 15:17 -

ravchik,
на главной странице сайта все ссылки делаются активными.. как исправить?

ТЫ как-то решил эту проблему? У меня также, не могу понять почему
ravchik
Юзер

ravchik - 17 февраля 2016 15:55 - 

<script>
$(function(){
    var loc = window.location.pathname;
    $('.nav a').each(function(){
        $(this).toggleClass('this', $(this).attr('href') == loc);
    });
});
</script>
rus mod
Юзер

rus mod - 17 февраля 2016 17:00 -

О, заработало. спасибо !))
pznt
Юзер

pznt - 14 октября 2013 11:56 -

а если несколько уровней в меню?
vita88
Юзер

vita88 - 2 марта 2014 15:44 -

Можно как-то сделать чтобы подстветка оставалась при просмотре полной новости?
NAMAT
Юзер

NAMAT - 29 сентября 2014 19:17 -

на главной странице сайта все ссылки делаются активными.. как исправить?
rus mod
Юзер

rus mod - 17 февраля 2016 15:18 -

У тебя получилось решить эту проблему?
cracken
Юзер

cracken - 21 октября 2014 20:57 -

на главной странице сайта все ссылки делаются активными.. как исправить?
Sokolov
Юзер

Sokolov - 11 декабря 2014 17:33 -

Просто добавь в стили и всё

a:visited {
color: #210075;
}
Ri4i
Юзер

Ri4i - 4 апреля 2015 17:33 -

Изврат какой-то. Грузить 200 килобайт jquery, что бы подсветить категорию.
Вставьте JS:
$(function () {                             // когда страница загружена
    $('.menu a').each(function () {    // проходим по нужным нам ссылками
        var location = window.location.href // переменная с адресом страницы
        var link = this.href                // переменная с url ссылки
        var result = location.match(link);  // результат возвращает объект если совпадение найдено и null при обратном
        if(result != null) {                // если НЕ равно null
            $(this).parent().addClass('active');    // добавляем класс
        } else {
            $(this).parent().removeClass('active');    // удаляем класс
        }
    });
});

CSS:
.menu li {background:#fff;}
.menu li {background:#000;}

HTML:
<ul class="menu">
    <li><a href="/index.php">Главная</a></li>
    <li><a href="/ushi/">Уши</a></li>
    <li><a href="/nogi/">Ноги</a></li>
    <li><a href="/gogi/">Гоги</a></li>
</ul>

Минус в том, что при входе на главную <a href="/"></a>, никакая категория подсвечена не будет.
maxxbr
Юзер

maxxbr - 8 мая 2015 09:59 -

Помогите разобраться, нервов уже не хватает((( Есть такое меню
</head>
<body>
<ul class="css-menu-3">
<li><a href="#">Главная</a></li>
<li><a href="#">Фотогалерея</a></li>
<li><a href="#">Библиотека</a></li>
<li><a href="#" class="selected">Расчёт расстояний</a></li>
<li><a href="#">Форум</a></li>
<li><a href="#">Доска объявлений</a></li>
<li><a href="#">Контакты</a></li>
</ul>

К нему идут такие вот стили...
ul.css-menu-3 {
list-style: none;
border-bottom: 1px solid #bb0000;
border-top: 1px solid #114477;
padding: 11px;
background: #336699
}

ul.css-menu-3 li {
display: inline
}

ul.css-menu-3 li a {
color: #fefefe;
text-decoration: none;
background: #225588;
border: 1px solid #225588;
border-bottom: 1px solid #114477;
margin: 0;
padding: 10px 14px 10px 14px
}

ul.css-menu-3 li a:hover {border-left: 1px solid #114477; border-right: 1px solid #114477}

ul.css-menu-3 li a.selected {
color: #fefefe;
background: #bb0000;
border: 1px #cc0000 solid;
border-bottom: 1px solid #bb0000;
border-left: 1px solid #770000;
padding: 10px 14px 10px 14px
}
Как заставить подсвечиваться активную область????
Все коды перепробовал, не получается((
FastFud
Юзер

FastFud - 8 мая 2015 11:27 -

Чтобы все работало, нужно вставить реальные ссылки в меню, к примеру: Вместо 
<li><a href="#">Главная</a></li>
Написать так 
<li><a href="/home/">Главная</a></li>
Когда пользователь зайдет по адресу 
http://site.ru/home/ - ссылка в меню будет активной.
В вашем случае, скрипт будет таким 
jQuery(document).ready(function($) {
    $('.css-menu-3 a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('selected');
});
maxxbr
Юзер

maxxbr - 8 мая 2015 12:07 -

Спасибо, буду пробовать, отпишусь как всё прошло!
maxxbr
Юзер

maxxbr - 8 мая 2015 13:07 -

Блин спасибо большое! Единственный сайт где реально помогли!!
Единственное что добавил
 Показать / Скрыть текст

открывающие и закрывающие теги, заработало))))
Один только косяк))) Главная страница у меня не ХОУМ а имя домена..... и при клике на кнопку главная, она остаётся по умолчанию, а все другие выделяются???? То есть стоит главную задать как houm? Не получается(( всё выделено
maxxbr
Юзер

maxxbr - 8 мая 2015 13:18 -

FastFud
Юзер

FastFud - 8 мая 2015 14:09 -

1. Это не проблема, можно сделать.
2. Если вы используете dle, то можно сделать пункты меню активными не используя скрипты а стандартные теги dle.
maxxbr
Юзер

maxxbr - 8 мая 2015 14:11 -

А как это сделать? Сайт укозовский.
FastFud
Юзер

FastFud - 8 мая 2015 14:23 - 

$(function(){
    var loc = window.location.pathname;
    $('.css-menu-3 a').each(function() {
        $(this).toggleClass('selected', $(this).attr('href') == loc);
    });
});
maxxbr
Юзер

maxxbr - 8 мая 2015 14:33 -

Всё работает как надо!!! Но фотогалерея перестала подсвечиваться)))
А вообще спасибо!! Даже не надеялся что получится!
FastFud
Юзер

FastFud - 8 мая 2015 14:37 -

добавьте / после /photo
maxxbr
Юзер

maxxbr - 8 мая 2015 14:40 -

Блин супер!!!!!! Всё работает! Спасибо огроменное! Жесть!
maxxbr
Юзер

maxxbr - 8 мая 2015 14:44 -

С меня ссылки с форумов!)) Вообще помог!
Anton_106
Юзер

Anton_106 - 27 мая 2015 07:41 -

Добрый день. Не могу сделать активную кнопку меню...
header.php
            <div class="cleared reset-box"></div>
            <div class="icrb-bar icrb-nav">
                <div class="icrb-nav-outer">
<ul class="icrb-hmenu menu-2">
    <li class="menu-item-11 iconmain"><a href="http://icrb55.esy.es/2015/05/15/привет-мир/">Главная</a></li>
    <li class="menu-item-12 icon2"><a href="http://icrb55.esy.es/контакты/">Контакты</a></li>
    <li class="menu-item-15 icon3"><a href="http://icrb55.esy.es/запись-на-прием-к-врачу/">Запись на прием к врачу</a></li>
    <li class="menu-item-13 icon4"><a href="http://icrb55.esy.es/написать-письмо/">Написать письмо</a></li>
    <li class="menu-item-14 icon5"><a href="http://icrb55.esy.es/отзывы/">Отзывы и комментарии</a></li>
</li>
</ul>
</div>
</div>
            <div class="cleared reset-box"></div>

в JS прописал
jQuery(document).ready(function($) {
    $('.icrb-vmenu a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('selected');
});

в стилях css:
ul.icrb-hmenu>li>a
{
   position: relative;
   display: block;
   height: 30px;
   cursor: pointer;
   text-decoration: none;
   color: #5685D8;
   padding: 0 17px;
   line-height: 30px;
   text-align: center;
}

ul.icrb-hmenu>li>a:before, ul.icrb-hmenu>li>a:after
{
   position: absolute;
   display: block;
   content:' ';
   top: 0;
   bottom:0;
   z-index: -1;
   background-image: url('images/menuitem.png');
   margin-left: -22px;
   width: 109%;
}

ul.icrb-hmenu>li>a:before
{
   left: 0;
   right: 0;
   background-position: top left;
}

ul.icrb-hmenu>li>a:after
{
   width: 0;
   right: 0;
   background-position: top right;}

.icrb-hmenu a, .icrb-hmenu a:link, .icrb-hmenu a:visited, .icrb-hmenu a:hover, .icrb-hmenu a:active
{
   font-weight: bold;
   font-size: 16px;
   text-align: left;
   text-decoration: none;

}

ul.icrb-hmenu>li>a:hover:before, ul.icrb-hmenu>li:hover>a:before {
   background-position: center left;
}
ul.icrb-hmenu>li>a:hover:after, ul.icrb-hmenu>li:hover>a:after {
   background-position: center right;
}
ul.icrb-hmenu>li>a:hover, ul.icrb-hmenu>li:hover>a{
   color: #5685D8;
}

ul.icrb-hmenu>li>a:active:before, ul.icrb-hmenu>li:active>a:before {
   background-position: center left;
}
ul.icrb-hmenu>li>a:active:after, ul.icrb-hmenu>li:active>a:after {
   background-position: center right;
}
ul.icrb-hmenu>li>a:active, ul.icrb-hmenu>li:active>a{
   background-image: url('images/menuitem.png');
}

Что не так сделал? Там с меню связаное очень много - поэтому скорее всего не всё прислал. Сайт делали нам на заказ, поэтому развернул черновой - сижу разбираюсь...
FastFud
Юзер

FastFud - 27 мая 2015 09:25 -

У вас тут указанно одно
jQuery(document).ready(function($) {
$('.icrb-vmenu a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('selected');
});
а тут
<ul class="icrb-hmenu menu-2">
совсем другое.

Скрипт будет таким: 
jQuery(document).ready(function($) {
    $('.icrb-hmenu a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('selected');
});
Anton_106
Юзер

Anton_106 - 27 мая 2015 10:05 -

прописал в script.js ваши изменения
jQuery(document).ready(function($) {
    $('.icrb-hmenu a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('selected');
});

всё равно не робит(((
FastFud
Юзер

FastFud - 27 мая 2015 10:09 -

В стилях которые вы предоставили отсутствует класс selected
Anton_106
Юзер

Anton_106 - 27 мая 2015 10:11 -

а как и куда его прописать?
FastFud
Юзер

FastFud - 27 мая 2015 10:13 -

Пример: 
ul.icrb-hmenu>li>a.selected {
    color: red;
    background: white;
}
Anton_106
Юзер

Anton_106 - 27 мая 2015 10:21 -

Прописал кнопку так:
ul.icrb-hmenu>li {
   margin-left:9px;
}
ul.icrb-hmenu>li:first-child a{
   margin-left:0;
}

ul.icrb-hmenu>li:first-child:before{
   display:none;
}
ul.icrb-hmenu>li>a:selected {
    color: red;
    background: white;
}

но не работает((
FastFud
Юзер

FastFud - 27 мая 2015 10:24 -

А нужно так
ul.icrb-hmenu>li {
   margin-left:9px;
}
ul.icrb-hmenu>li:first-child a{
   margin-left:0;
}

ul.icrb-hmenu>li:first-child:before{
   display:none;
}
ul.icrb-hmenu>li>a.selected {
    color: red;
    background: white;
}
Anton_106
Юзер

Anton_106 - 27 мая 2015 10:26 -

так тоже пробовал - не робит... потом на ":" исправил, тоже не робит
FastFud
Юзер

FastFud - 27 мая 2015 10:29 -

Дайте ссылку на сайт.
Anton_106
Юзер

Anton_106 - 27 мая 2015 10:40 -

http://icrb55.ru - оригинал
http://icrb55.esy.es - тестовый. на тестовый я даже доступ в админ панель могу дать.
Xactip
Юзер

Xactip - 30 июля 2015 10:35 -

а скажите, как сделать подсветку меню, если в меню указаны ссылки в виде /index.php?do=feedback и /index.php?do=advice ? пробовал как вы писали в комментариях, но не получилось. помогите, пожалуйста. Ссылка на сайт: http://zhyhadla.by/index.php
Xactip
Юзер

Xactip - 30 июля 2015 10:45 -

вопрос снимается.
Сделал
<script type="text/javascript">
$(function () { // Когда страница загрузится
$('.sf-menu a').each(function () { // получаем все нужные нам ссылки
var location = window.location.href; // получаем адрес страницы
var link = this.href; // получаем адрес ссылки
if(location == link) { // при совпадении адреса ссылки и адреса окна
$(this).addClass('active'); //добавляем класс
}
});
});
и всё в поряде)
akucher
Юзер

akucher - 30 ноября 2015 12:50 -

для Bootstrap

$(function () { // Когда страница загрузится
    $('.nav a').each(function () { // получаем все нужные нам ссылки
        var location = window.location.href; // получаем адрес страницы
        var link = this.href;  // получаем адрес ссылки
        if(location == link) { // при совпадении адреса ссылки и адреса окна
            $(this).parent("li").addClass('active'); // добавляем класс
        }
    });
});
lsdoptom
Юзер

lsdoptom - 16 февраля 2017 05:48 - 


<li class="active open">
<a href="javascript:void(0)">
<span>Меню</span>
</a>

<ul class="sub-menu">
<li class="active">
<a href="/"> <span class="title"> Под меню</span> </a>
</li>
</ul>

</li>


Подскажите пожалуйста, как сделать по такой структуре меню, с выпадающим списком. Получается добавить нужно три класса.
the_drunker
Юзер

the_drunker - 10 мая 2018 15:10 -

а если конструкция такая

<div id="pS"><a href="/"><img src=""></a></div>

то как мне присвоить класс <img>
-----------------
т.е. мне нужно чтобы после проверки и совпадения ссылки класс присвоился не тегу <a> а вложенному туда <img> / можно ли такое сделать и если да то как
redissx
Юзер

redissx - 10 мая 2018 15:44 - 

$(function () { // Когда страница загрузится
    $('#pS a').each(function () { // получаем все нужные нам ссылки
        var location = window.location.href; // получаем адрес страницы
        var link = this.href;  // получаем адрес ссылки
        if(location == link) { // при совпадении адреса ссылки и адреса окна
            $(this).children("img").addClass('active'); // добавляем класс
        }
    });
});
the_drunker
Юзер

the_drunker - 10 мая 2018 16:29 -

я тормоз не child а children... спасибо )
а ларчик просто открывался (с)
Чтобы комментировать - войдите или зарегистрируйтесь на сайте
Перетаскиваемый блок без использования jQueryUI
Цифра рядом со ссылкой в облаке тегов DLE на jQuery
наверх