Не могу применить класс к пункту меню

Question

У меня проблема с этим кодом ниже:

JS

$(document).ready(function() {
  var url = window.location;
  var element = $('#nav1  li a').filter(function() {
    return this.href == url || url.href.indexOf(this.href) == 0;
  }).parent().addClass('navigation__active');
  if (element.is('li')) {
    element.addClass('navigation__active').parent().parent('li').addClass('navigation__active')
  }
});

HTML

<ul id="nav1" class="navigation">
<li class="navigation__active"><a href="#"><i class="zmdi zmdi-home"></i> 
   Home</a></li>

 <li class="navigation__sub">
    <a href="#"><i class="zmdi zmdi-view-week"></i> About</a>
    <ul>
        <li><a href="#">History</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Projects</a></li>
    </ul>
</li>
  <li class="navigation__active"><a href="#"><i class="zmdi zmdi-home"></i> 
    Contact</a></li>
 <ul>

На данный момент я могу выбрать О программе> История, Команда, Проектынапример, и это работает, хорошо, но я, когда я нажимаю Home или Contact - навигация__active класс не применяется.Есть ли какое-то решение для этого?

Answer 1

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

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

$(document).ready(function() {
  var url = {href: "https://stacksnippets.net/test"};
  var element = $('#nav1  li a').filter(function(index, el) {
    return url.href === el.href;
  });
  
  var selectedElem = $(element[0]);
  
  if (selectedElem.parent().is('li')) {
    selectedElem.parent('li').addClass('navigation__active')
    var paretnMenuItem = selectedElem.parent('li').parent('ul').parent('li');
    paretnMenuItem.children('a').addClass('navigation__active')
  }
});

.navigation__active {
  background-color: green;
}

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

<ul id="nav1" class="navigation">
  <li>
    <a href="#"><i class="zmdi zmdi-home"></i> Home</a>
  </li>

  <li class="navigation__sub">
    <a href="#"><i class="zmdi zmdi-view-week"></i> About</a>
    <ul>
      <li><a href="#">History</a></li>
      <li><a href="test">Team</a></li>
      <li><a href="#">Projects</a></li>
    </ul>
  </li>
  <li>
    <a href="#"><i class="zmdi zmdi-home"></i> Contact</a>
  </li>
 <ul>