Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru Сниппеты JS Сниппеты Подсветка активного пункта меню на jQuery

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


     31.05.2013    JS Сниппеты    14882

Довольно часто встаёт проблема подсветки активного пункта в меню.
Проблема решается одной строчкой кода)
Подсветка активного пункта меню на 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

Комментарии пользователей (44)

shamanim
1

166 | 30

shamanim - 1 июня 2013 20:34 - Юзер


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

https://dle-faq.ru/uploads/comments/2296/temp.jpg

vlavik007
12 | 3

vlavik007 - 27 июня 2013 17:17 - Юзер

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

TheImDim
18

327 | 291

TheImDim - 27 июня 2013 17:45 - Юзер

Попробуй


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


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

TheImDim
18

327 | 291

TheImDim - 27 июня 2013 17:56 - Юзер


vlavik007
12 | 3

vlavik007 - 27 июня 2013 18:33 - Юзер

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

TheImDim
18

327 | 291

TheImDim - 27 июня 2013 18:41 - Юзер

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


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

vlavik007
12 | 3

vlavik007 - 27 июня 2013 19:25 - Юзер

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

ravchik
66

375 | 123

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

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

rus mod
7

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

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

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

ravchik
66

375 | 123

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
7

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

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

pznt
3

88 | 73

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

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

vita88
24 | 2

vita88 - 2 марта 2014 15:44 - Юзер

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

NAMAT
13

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

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

rus mod
7

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

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

cracken
6

47 | 6

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

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

Sokolov
92 | 9

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

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

a:visited {
color: #210075;
}

Ri4i
1

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
8

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
50

1599 | 588

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
8

maxxbr - 8 мая 2015 12:07 - Юзер

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

maxxbr
8

maxxbr - 8 мая 2015 13:07 - Юзер

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

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

maxxbr
8

maxxbr - 8 мая 2015 13:18 - Юзер


FastFud
50

1599 | 588

FastFud - 8 мая 2015 14:09 - Юзер

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

maxxbr
8

maxxbr - 8 мая 2015 14:11 - Юзер

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

FastFud
50

1599 | 588

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
8

maxxbr - 8 мая 2015 14:33 - Юзер

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

FastFud
50

1599 | 588

FastFud - 8 мая 2015 14:37 - Юзер

добавьте / после /photo

maxxbr
8

maxxbr - 8 мая 2015 14:40 - Юзер

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

maxxbr
8

maxxbr - 8 мая 2015 14:44 - Юзер

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

Anton_106
6

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
50

1599 | 588

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
6

Anton_106 - 27 мая 2015 10:05 - Юзер

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

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

FastFud
50

1599 | 588

FastFud - 27 мая 2015 10:09 - Юзер

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

Anton_106
6

Anton_106 - 27 мая 2015 10:11 - Юзер

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

FastFud
50

1599 | 588

FastFud - 27 мая 2015 10:13 - Юзер

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

Anton_106
6

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
50

1599 | 588

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
6

Anton_106 - 27 мая 2015 10:26 - Юзер

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

FastFud
50

1599 | 588

FastFud - 27 мая 2015 10:29 - Юзер

Дайте ссылку на сайт.

Anton_106
6

Anton_106 - 27 мая 2015 10:40 - Юзер

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

Xactip
28 | 1

Xactip - 30 июля 2015 10:35 - Юзер

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

Xactip
28 | 1

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
4 | 1

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'); // добавляем класс
        }
    });
});

Чтобы комментировать - войдите или зарегистрируйтесь на сайте