Форум

Dayros · #1 (**permalink**) 18.01.2018, 10:00

Здравствуйте, на сайте в главном меню ссылки ведут на категории статей, а отдельные статьи не имеют своих пунктов в меню. Если листать по категориям, то пункты меню подсвечиваются таким скриптом:

$(document).ready(function(){
    var my_link = location.pathname;
    $('.list-menu li a[href="'+my_link+'"]').parent().addClass('active');
});

<ul class="list-menu">
     <li class="hidden"><a href="/">Главная</a></li>
     <li><a href="/категория1">Категория1</a></li>
     <li><a href="/категория2">Категория2</a></li>
     <li><a href="/категория3">Категория3</a></li>
     <li><a href="/категория4">Категория4</a></li>
</ul>

Вопрос как сделать выделения пункта меню для категории, когда мы находимся на странице статьи из этой категории?

На всякий случай еще раз объясню) есть ссылка в меню http://localhost/категория1/ - она нормально подсвечивается когда активна, но если перейти на статью из этой категории то скрипт не работает для урла http://localhost/категория1/статья1, потому что такой ссылки нет в меню. А нужно оставить активным пункт данной категории

рони · #2 (**permalink**) 18.01.2018, 10:53

Dayros,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">  .active {
    background-color: #FF0000;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
  var my_link = "http://localhost/категория1/статья1";  //  var my_link = location.pathname;
  $('.list-menu li a').filter(function() {
  var href = this.getAttribute("href");
  return  href.length > 1 && my_link.indexOf(href) !== -1;
}).parent().addClass('active');
});
  </script>
</head>

<body>
<ul class="list-menu">
  <li class="hidden"><a href="/">Главная</a></li>
  <li><a href="/категория1">Категория1</a></li>
  <li><a href="/категория2">Категория2</a></li>
  <li><a href="/категория3">Категория3</a></li>
  <li><a href="/категория4">Категория4</a></li>
</ul>


</body>
</html>

Dayros · #3 (**permalink**) 18.01.2018, 11:26

Спасибо большое, все работает как нужно)

Форум

Справочник

Discord чат

Курсы javascript