Артём Мáлков

Выделяем активный пункт меню на jQuery

27 июн44 коммАртём Мáлков

На различных CMS есть стандартные инструменты (настройки, плагины), и с их помощью можно реализовать подсветку пункта в меню, в котором находится пользователь.

Но данный функционал есть не у каждого, особенно если сайт статичный. Одно могу сказать точно – если вы еще не реализовали это на своем сайте, то уделите немного времени и устраните пробелы в юзабилити, ведь такая функция помогает пользователю сориентироваться на вашем сайте.

Для решения задачи, как вы поняли, мы используем jQuery, и реализация будет выглядеть следующим образом.

Предположим, что у нас имеется такое меню:

<ul class="navigation">

	<li><a href="/main">Главная</a></li>
	<li><a href="/about_us">О нас</a></li>
	<li><a href="/about_us/team">Команда</a></li>

</ul>

Что нам необходимо сделать? Сверить текущий URL с URL, указанными в меню, и в случае совпадения присвоить класс соответствующему пункту.

Готовый скрипт для данного примера будет выглядеть следующим образом:

<script>

	$(function() {

		var pathname_url = window.location.pathname;
		var href_url = window.location.href;

		$(".navigation li").each(function () {

			var link = $(this).find("a").attr("href");

			if(pathname_url == link || href_url == link) {

				$(this).addClass("active");

			}

		});

	});
	
</script>

«active» здесь – класс активного пункта меню. Далее, применяя стили, выделяете активный пункт, например, с помощью цвета:

.navigation li.active a {
	color: green;
}

По аналогии скрипт можно переделать под любую другую структуру меню. Если у вас возникают с этим проблемы – пишите в комментариях, постараюсь помочь.

Рекомендуем к просмотру
Плавная прокрутка страницы до нужного блока на jQuery
Модули и скрипты
Получаем всю информацию о текущем URL на JavaScript
Статьи и советы
Как создать и вывести меню сайта в WordPress?
Посты
44
комментария
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 3
    1
      •  Пользователь
    7 мар в 22:30

    Артему респектище!

    Сам гуманитарий и абсолютный чайник в технических вопросах, своим сайтом занимаюсь сам по чуть-чуть и две недели "убил" на поиск подобного решения: этот вариант заработал сразу же, изменил только наименование класса. И код скрипта чистый, без ошибок ... Красота! Один "пунктик" в перечне намеченных задач выполнен, еще много запланировано, но теперь знаю, где в первую очередь искать решения по остальным - буду изучать этот сайт wink

    С уважением,

      • 0
      1080
        •  Команда Pandoge
      9 мар в 00:50

      Владимир Рахманов, спасибо за добрые слова!

    • 1
    1
      •  Пользователь
    10 мая в 11:56

    Артём, привет! Всем участникам тоже.

    А можете подсказать как быть в моём случае чтобы выделить активный пункт меню, созданного с помощью плагина? Может быть просто нужно что-то прописать в стили используя уже имеющиеся current-menu-parent, current-menu-ancestor или current-menu-item?

    А вот что прописать я не знаю. И возможно ли такое что плагин "перекроет" стили темы и их нужно будет прописывать непосредственно в css плагина? Заранее большое спасибо.

    КОД МЕНЮ:

    <ul id="accordeconck2" class="menu" accordeonck_done="1"><li id="menu-item-2639" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children accordeonck parent menu-item-2639 level1 parent open"><span class="accordeonck_outer toggler toggler_0"><span class="toggler_icon"></span><a class="accordeonck">◈  ОТДЕЛКА СНАРУЖИ</a></span>

    <ul class="content_0" style="display: block;">

    <li id="menu-item-2644" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat current-menu-item accordeonck menu-item-2644 level2"><span class="accordeonck_outer "><a href="https://m-door.ru/product-category/otdelka/poroshok/" class="accordeonck">Порошок</a></span></li>

    <li id="menu-item-2643" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat accordeonck menu-item-2643 level2"><span class="accordeonck_outer "><a href="https://m-door.ru/product-category/otdelka/mdf/" class="accordeonck">МДФ</a></span></li>

    <li id="menu-item-2642" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat accordeonck menu-item-2642 level2"><span class="accordeonck_outer "><a href="https://m-door.ru/product-category/otdelka/massiv-duba/" class="accordeonck">Массив дуба</a></span></li>

    </ul>

    </li>

    </ul>

      • 0
      1080
        •  Команда Pandoge
      10 мая в 12:29

      Александр, здравствуйте. Если я правильно понял, то скрипт:

      <script>
      
      	$(function() {
      
      		var pathname_url = window.location.pathname;
      		var href_url = window.location.href;
      
      		$("#content_0 li").each(function() {
      
      			var link = $(this).find("a").attr("href");
      
      			if(pathname_url == link || href_url == link) {
      
      				$(this).addClass("active");
      
      			}
      
      		});
      
      	});
      	
      </script>

      Стили:

      #content_0 li.active a {
      	color: green !important;
      }
    • 0
    10
      •  Проверенный
    30 мар в 14:52

    Здравствуйте, Артём! Я начинающий в вёрстке, так что не судите строго пожалуйста. Работаю над меню, применил ваш метод, но не получается. Подскажите пожалуйста, что делаю не так.

    <div class="novig-display">
             <ul class="nov">
               <li><a href="/">главная</a></li>
               <li><a href="/OSPanel/domains/cover-mania2.loc/for_us.html">о нас</a></li>
               <li><a href="/OSPanel/domains/cover-mania2.loc/news.html">новости</a></li>
               <li><a href="/OSPanel/domains/cover-mania2.loc/Payment_delivery.html">оплата и доставка</a></li>
               <li><a href="/OSPanel/domains/cover-mania2.loc/guarantees.html">гарантии</a></li>
               <li><a href="/OSPanel/domains/cover-mania2.loc/discounts.html">скидки</a></li>
               <li><a href="/OSPanel/domains/cover-mania2.loc/contacts.html">контакты</a></li> 
             </ul>
          </div>
    
    .nov a{
       font-size: 2rem;
       font-weight: 800;
       text-decoration: none;
       color: #FD6930;
       border-radius: 20px;
       padding: 0 0.5rem 0 0.5rem;
       display: block;
    }
    
    .nov a:hover {
       color: #374483;
       background: /*#FF8253;*/url(../images/nov-li-bg.jpg);
       transition: 0.6s;
    }
    
    .nov li:active a{
       color: #374483;
       background: url(../images/nov-li-bg.jpg);
       transition: 0.6s;
    }
      • 0
      10
        •  Проверенный
      30 мар в 14:53
      <!DOCTYPE html>
      <html lang="ru">
        <head>
          <meta charset="utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1"> <!--Адаптация вёрстки-->
          <meta property="og:url" content="">
          <meta property="og:type" content="website">
          <meta property="og:title" content="Интернет-магазин">
          <meta property="og:image" content="">
          <meta property="og:site_name" content="Cover-Mania">
          <meta property="article:author" content="Амир Минсафин">
          <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=cyrillic" rel="stylesheet"> 
          <title>Cover-Mania</title>
          <link href="css/bootstrap.min.css" rel="stylesheet">
          <link href="css/style.css" rel="stylesheet">
          <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
          <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
          <![endif]-->
           <script type="text/javascript" src="js/functions.js"></script>
      
            <script type="text/javascript">
                window.onload = function () {
                //
                $(window).scroll(function() {
                    if ($(this).scrollTop() > 100) {
                        if ($('#toTop').is(':hidden')) {
                            $('#toTop').css({opacity : 1}).fadeIn('slow');
                        }
                    } else { $('#toTop').stop(true, false).fadeOut('fast'); }
                });
                $('#toTop').click(function() {
                    $('html, body').stop().animate({scrollTop : 0}, 300);
                });
                }
           </script>
      
           <script>
      
        $(function() {
      
          var pathname_url = window.location.pathname;
          var href_url = window.location.href;
      
          $(".nov li").each(function () {
      
            var link = $(this).find("a").attr("href");
      
            if (pathname_url == link || href_url == link) {
      
              $(this).addClass("active");
      
            }
      
          });
      
        });
        
      </script>
      
      
        </head>
      • 1
      1080
        •  Команда Pandoge
      30 мар в 15:10

      Амир Минсафин, попробуйте скрипт подсветки меню вставить перед </body>

      • 1
      1080
        •  Команда Pandoge
      30 мар в 15:21

      Амир Минсафин, И вот тут ошибка:

      .nov li:active a{

      Должно быть:

      .nov li.active a {
      • 0
      10
        •  Проверенный
      30 мар в 17:44

      Смпасибо, Артём! Частично получилось. Когда нажимаю на пункт меню, то меня выкидывает на экран с надписью

      Object not found!

      The requested URL was not found on this server. The link on the referring page seems to be wrong or outdated. Please inform the author of that page about the error.

      If you think this is a server error, please contact the webmaster.

      Error 404

      cover-mania2.loc

      Apache

      • 0
      10
        •  Проверенный
      30 мар в 17:47

      Далее нажимаю на стрелку (назад на предыдущую страницу), то нажатый пункт меню подсвечивается как надо, но когда мышку сдвигается с верхней панели с вкладками браузера на страничку будущего сайта, то подсветка пункта пропадает. Наверное что-то не то с моими ссылками <li><a href="/OSPanel/domains/cover-mania2.loc/for_us.html">о нас</a></li>

      • 1
      1080
        •  Команда Pandoge
      30 мар в 17:58

      Попробуйте:

      <li><a href="/OSPanel/domains/cover-mania2.loc/for_us.html">о нас</a></li>
      <li><a href="/OSPanel/domains/cover-mania2.loc/news.html">новости</a></li>
      <li><a href="/OSPanel/domains/cover-mania2.loc/Payment_delivery.html">оплата и доставка</a></li>
      <li><a href="/OSPanel/domains/cover-mania2.loc/guarantees.html">гарантии</a></li>
      <li><a href="/OSPanel/domains/cover-mania2.loc/discounts.html">скидки</a></li>
      <li><a href="/OSPanel/domains/cover-mania2.loc/contacts.html">контакты</a></li>

      заменить на:

      <li><a href="/for_us.html">о нас</a></li>
      <li><a href="/news.html">новости</a></li>
      <li><a href="/Payment_delivery.html">оплата и доставка</a></li>
      <li><a href="/guarantees.html">гарантии</a></li>
      <li><a href="/discounts.html">скидки</a></li>
      <li><a href="/contacts.html">контакты</a></li>
      • 0
      10
        •  Проверенный
      30 мар в 21:18

      Артём, получилось вот что: теперь получается переключить вкладки и только один раз, например загружаю главную страницу cover-mania2.loc/, затем нажимаю любую вкладку, например скидки http://cover-mania2.loc/discounts.html, вкладка переключается - появляется содержимое вкладки, а дальше всё, на какие бы я вкладки не нажимал, переключается только путь в командной строке браузера. И активные вкладки так и не подсвечиваются.

      • 0
      10
        •  Проверенный
      30 мар в 21:29
      <div class="novig-display">
               <ul class="nov">
                 <li><a href="/index.php">главная</a></li>
                 <li><a href="/for_us.html">о нас</a></li>
                 <li><a href="/news.html">новости</a></li>
                 <li><a href="/Payment_delivery.html">оплата и доставка</a></li>
                 <li><a href="/guarantees.html">гарантии</a></li>
                 <li><a href="/discounts.html">скидки</a></li>
                 <li><a href="/contacts.html">контакты</a></li> 
               </ul>
            </div>
      • 0
      10
        •  Проверенный
      30 мар в 21:32
      .nov a{
         font-size: 2rem;
         font-weight: 800;
         text-decoration: none;
         color: #FD6930;
         border-radius: 20px;
         padding: 0 0.5rem 0 0.5rem;
         display: block;
      }
      
      .nov a:hover {
         color: #374483;
         background: /*#FF8253;*/url(../images/nov-li-bg.jpg);
         transition: 0.6s;
      }
      
      .nov li.active a{
         color: #374483;
         background: url(../images/nov-li-bg.jpg);
         transition: 0.6s;
      }
      • 0
      10
        •  Проверенный
      30 мар в 21:33
      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      
              <script>
      
        $(function() {
      
          var pathname_url = window.location.pathname;
          var href_url = window.location.href;
      
          $(".nov li").each(function () {
      
            var link = $(this).find("a").attr("href");
      
            if (pathname_url == link || href_url == link) {
      
              $(this).addClass("active");
      
            }
      
          });
      
        });
        
      </script>
       
      </body>
      </html>
      • 1
      1080
        •  Команда Pandoge
      30 мар в 23:43

      Амир Минсафин, так трудно помочь. Выгрузите архив сайта, посмотрю у себя локально его.

      • 0
      10
        •  Проверенный
      31 мар в 21:19

      Артём спасибо! Куда можно скинуть? Здесь негде прикрепить файл

      • 0
      1080
        •  Команда Pandoge
      31 мар в 23:10

      Амир Минсафин, в облако + ссылку в комментарии.

      • 1
      1080
        •  Команда Pandoge
      1 апр в 01:02

      Амир Минсафин, посмотрел. Чтобы меню работало - ссылки в меню нужно проставить на всех страницах. Сейчас они есть только на главной.

      Подсветка работает. Увидеть Вы можете это на главной странице.

      Для этого, либо адрес у ссылки в меню вместо /index.php сделайте /, либо в браузере добавьте /index.php.

      • 1
      10
        •  Проверенный
      1 апр в 22:43

      Всё получилось!!! Спасибо огромное, Артём!

    • 0
    766
      •  Гости
    25 авг в 19:53

    Здравствуйте. Подскажите, что не так в моем коде? css у меня другой, но никак не могу сделать выделенную вкладку меню, на которой нахожусь

    Вот html

    <nav class="top-menu">
    <ul class="menu-main">
        <li><a href="/forum/lenta/">Все статьи</a></li>
        <li><a href="/forum/lenta/categories/novosti.1/">Кейсы</a></li>
      </ul>
    </nav>

    Вот Css

    @import url('https://fonts.googleapis.com/css?family=Ubuntu+Condensed');
    .menu-main {
      list-style: none;
      margin: 0px 0 20px;
      padding: 25px 0 5px;
      text-align: center;
      background: white;
    }
    .menu-main li {display: inline-block;}
    .menu-main li:after {
      content: "|";
      color: #606060;
      display: inline-block;
      vertical-align:top;
    }
    .menu-main li:last-child:after {content: none;}
    .menu-main a {
      text-decoration: none;
      font-family: 'Ubuntu Condensed', sans-serif;
      letter-spacing: 2px;
      position: relative;
      padding-bottom: 20px;
      margin: 0 34px 0 30px;
      font-size: 17px;
      text-transform: uppercase;
      display: inline-block;
      transition: color .2s;
    }
    .menu-main a, .menu-main a:visited {color: #9d999d;}
    .menu-main a.current, .menu-main a:hover{color: #feb386;}
    .menu-main a:before,
    .menu-main a:after {
      content: "";
      position: absolute;
      height: 4px;
      top: auto;
      right: 50%;
      bottom: -5px;
      left: 50%;
      background: #feb386;
      transition: .8s;
    }
    .menu-main a:hover:before, .menu-main .current:before {left: 0;}
    .menu-main a:hover:after, .menu-main .current:after {right: 0;}   
    @media (max-width: 550px) {
    .menu-main {padding-top: 0;}
    .menu-main li {display: block;}
    .menu-main li:after {content: none;}
    .menu-main a {
      padding: 25px 0 20px; 
      margin: 0 30px;
    }
    }

    А вот JS

    <script>
    	$(function() {
    		var pathname_url = window.location.pathname;
    		var href_url = window.location.href;
    		$('.menu-main li').each(function () {
    			var link = $(this).find('a').attr('href');
    			if (pathname_url == link || href_url == link) {
    				$(this).addClass('current');
    			}
    		});
    	});
    </script>

    Использую класс current по аналогии с вашим active, но ничего не происходит

      • 0
      1080
        •  Команда Pandoge
      25 авг в 21:17

      Daniil Ermolov, строку:

      .menu-main a.current, .menu-main a:hover{color: #feb386;}

      замените на:

      .menu-main .current a, .menu-main a:hover {color: #feb386;}

      • 0
      766
        •  Гости
      25 авг в 22:36

      Спасибо, но не помогло, к сожалению(

      • 0
      1080
        •  Команда Pandoge
      25 авг в 23:21

      Daniil Ermolov, уверены?

      А если так:

      .menu-main .current a, .menu-main a:hover {color: #feb386 !important;}

      • 0
      766
        •  Гости
      26 авг в 12:49

      Спасибо большое, всё заработало

    • 0
    766
      •  Гости
    22 апр в 20:06

    Возникли трудности на DLE c первым вариантом но вариант с под категориями работает отлично )

    Жаль что подсветка только когда на категории и неизвестно будет ли светиться когда будешь на 2 или 15 странице.

    Но самое обидное что когда находишься в новости этой категории она не подсвечивается. А с этим немного теряется полезность ( Можно сделать чтобы цвет держался пока ты не только в разделе но и в новости этого раздела?

    • 0
    766
      •  Гости
    16 янв в 14:01

    А если меню многоуровневое, то как посветить одновременно главный пункт меню и его подменю

    например чтобы находясь на странице подменю п.2 подсвечивалось и меню п.3 и само подменю п.2

    <li><a href="#">меню п.1</a></li>

    <li><a href="#">меню п.2</a></li>

    <li class="vertical_list"><a href="#">меню п.3</a>

    <ul>

    <li><a href="#">подменю п.1</a></li>

    <li><a href="#">подменю п.2</a></li>

    <li><a href="#">подменю п.3</a></li>

    </ul>

    </li>

      • 0
      766
        •  Гости
      16 янв в 15:15

      и да, <li class="vertical_list"> не одно, а то было бы слишком легко ....

      • 12
      1080
        •  Команда Pandoge
      16 янв в 15:33

      АлексСВАО, Попробуйте так.

      Меню:

      <ul class="navigation">
      
      	<li><a href="#">меню п.1</a></li>
      	<li><a href="#">меню п.2</a></li>
      	
      	<li class="vertical_list">
      	
      		<a href="#">меню п.3</a>
      		
        		<ul>
      		
        			<li><a href="#">подменю п.1</a></li>
        			<li><a href="#">подменю п.2</a></li>
        			<li><a href="#">подменю п.3</a></li>
      			
        		</ul>
      		
      	</li>
      	
      </ul>

      Скрипт:

      $(function() {
      	
      	var pathname_url = window.location.pathname;
      	var href_url = window.location.href;
      	
      	$(".navigation li").each(function () {
      	
      		var link = $(this).find("a").attr("href");
      		
      		if(pathname_url == link || href_url == link) {
      		
      			$(this).addClass("active");
      			$(this).parent().parent().addClass("active");
      			
      		}
      		
      	});
      	
      });

      Стили:

      .navigation li.active a {
      	color: green;
      }
      
      .navigation li:not(.active) a {
      	color: black;
      }

      В таком случае, если вы находитесь на "подменю п.1", то пункт "меню п.3" тоже подсветится.

      • 0
      766
        •  Гости
      16 янв в 19:58

      Да, спасибо, разобрался, сделал чуть иначе -

      $(this).closest('li.vertical_list').addClass('current');

      .closest(selector, [context]) - возвращает первый ближайший родительский узел

    • 1
    766
      •  Гости
    19 дек в 08:07

    Привет, Артем! Все отлично работает на уровне http://domain.com/manual_therapy/ , но когда ссыль такого вида http://domain.com/manual_therapy/examples.html , не подсвечивает. Как быть?

      • 6
      1080
        •  Команда Pandoge
      19 дек в 12:45

      Павел, Здравствуйте.

      Четыре комментария выше похожая структура у человека - и все работает. Перепроверьте структуру на своем сайте или скиньте адрес сайта где наблюдается проблема - постараюсь помочь.

    • 1
    766
      •  Гости
    9 ноя в 00:36

    Братка спасибо все ясно и понятно с первого раза заработало!

    • 0
    766
      •  Гости
    7 окт в 10:25

    Добрый день, не получается подключить скрипт. Сайт у меня на php, и делится на блоки, вот 2 меню, на которых пробовал скрипт:

    1)

    <nav class="navigations">
         <a href="/../../admin/index.php">Главная</a>
         <a href="/../../admin/aside/dobavit_statyu.php">Добавить статью</a>
         <a href="../admin/aside/izmenit_statyu.php">Изменить статьи</a>
         <a href="../admin/aside/schetchik_poseshchenij.php">Счетчик посещений</a>
         <a href="../admin/aside/chernyj_spisok.php">Бан лист</a>
    </nav>

    2)

    <ul class="navigations">
    	<li><a href="/../../admin/index.php">Главная</a></li>
    	<li><a href="/../../admin/aside/dobavit_statyu.php">Добавить статью</a></li>
    	<li><a href="../admin/aside/izmenit_statyu.php">Изменить статьи</a></li>
    	<li><a href="../admin/aside/schetchik_poseshchenij.php">Счетчик посещений</a></li>
    	<li><a href="../admin/aside/chernyj_spisok.php">Бан лист</a></li>
    </ul>

    скрипт 2):

    <script>
    	$(function() {
    		var pathname_url = window.location.pathname;
    		var href_url = window.location.href;
    		$('.navigations li').each(function () {
    			var link = $(this).find('a').attr('href');
    			if (pathname_url == link || href_url == link) {
    				$(this).addClass('active');
    			}
    		});
    	});
    </script>

    css 2):

    ul.navigations li.active a {
    	background: GreenYellow;
    	border: 1px solid silver;
    }

    Пока разбираюсь со вторым примером, так как на него много решений в поисковике, но они не помогают(

      • 6
      1080
        •  Команда Pandoge
      7 окт в 11:36

      Андрей, Здравствуйте. Все ваши варианты не верны. Ссылки в меню должны быть такого вида:

      <nav class="navigations">
      	
      	<a href="/admin/index.php">Главная</a>
      	<a href="/admin/aside/dobavit_statyu.php">Добавить статью</a>
      	<a href="/admin/aside/izmenit_statyu.php">Изменить статьи</a>
      	<a href="/admin/aside/schetchik_poseshchenij.php">Счетчик посещений</a>
      	<a href="/admin/aside/chernyj_spisok.php">Бан лист</a>
      	
      </nav>

      То есть без /../../ и т.д. И тогда все будет работать.

      • 1
      766
        •  Гости
      7 окт в 11:39

      Спасибо огромное! Все сразу заработало!))

      • 1
      766
        •  Гости
      13 июн в 15:48

      Блин,еще раз спасибо, опять помог ваш сайт (я писал первый комментарий "андрей")..

      2 дня с yii2 бился, не мог поставить active, но все уже заработало.

      Одна проблемка осталась, у меня страницы открываются с пагинацией, когда на первой странице находишься, работает active, а как сделать чтобы кнопка оставалась открытой когда переходишь по пагинации?

      Url такой имя сайта/category/2/page-2 , без /page-2 все отлично работает. Повторюсь, сайт на yii2.. Запутался уже((

      • 0
      766
        •  Гости
      13 июн в 21:39

      не поможете?:((

      • 0
      1080
        •  Команда Pandoge
      13 июн в 21:55

      Андрей, Не совсем понял.

      Чтобы перейдя по пагинации все равно подсвечивался /category/2/ ?

      • 0
      766
        •  Гости
      13 июн в 22:10

      блин... Ну вот допустим я нажимаю на курашим http://prntscr.com/jum0ew, открывается страница с этой категорией kur.local/category/2 , кнопка "курашим" остается нажатой. Но если перейти на 2-ую страницу пагинации, то active с кнопки слетает http://prntscr.com/jum2p0

      Вот, мне нужно чтобы на каждой странице пагинации на кнопке висело active. Так же как и на других категориях, и вложенных в курашим тоже

      Надеюсь понятно будет

      • 0
      1080
        •  Команда Pandoge
      13 июн в 22:14

      Андрей, ожидайте. Постараюсь помочь.

      • 0
      1080
        •  Команда Pandoge
      13 июн в 22:39

      Андрей, вот что придумал на скорую руку:

      var pattern = "/page-";
      
      if(pathname_url.indexOf(pattern) !== -1) {
      	
      	var from = pathname_url.search(pattern);
      	var pathname_url = pathname_url.substring(0, from);       
      
      }

      Код вставлять сразу после строчки:

      var href_url = window.location.href;
      • 0
      766
        •  Гости
      14 июн в 06:10

      эх... Видимо не понятно объяснил( По другому не знаю как объяснить(((

      • 0
      1080
        •  Команда Pandoge
      14 июн в 12:43

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

Подняться наверх
Регистрация на сайте
Pandoge - уникальный проект, который собрал на своих страницах большой опыт многих людей в сфере сайтостроения.Присоединяйся и ты к сообществу, получай неограниченные знания и начинай творить свою мечту!Нажимая кнопку «Регистрация» вы даете согласие на обработку своих персональных данных.
Имя и фамилия
E-mail
Логин
Пароль
Регистрация
Pandoge