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>

现在，我可以选择“关于”>“历史记录”，“团队”，“项目”，例如，这很好，但是当我单击“主页”或“联系人”时-我不应用navigation__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>

无法将类别应用于菜单项

1 个答案: