jQuery 菜单 - 基于 URL 的事件状态

Question

我只是想将事件状态改造为静态 html 菜单。菜单具有以下结构:-

<div id="navbar">
ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a href="index.htm">Home</a></li>
  <li><a href="about.htm">About Us</a></li>
  <li><a href="products.htm">Products</a>
    <ul>
       <li><a href="product-grp1">Product Groups 1</a>
         <ul>
            <li><a href="product1.htm">Product 1</a>
            <li><a href="product2.htm">Product 2</a>
            <li><a href="product3.htm">Product 3</a>
         </ul>
       </li>
    </ul>
  </li>
</ul>
</div>

您可以看到这是一个 3 级菜单系统，实际上显示为一个大型菜单。

我想要做的是，根据您所在页面的 URL，向顶级菜单添加事件状态。此事件状态需要显示您是在第二级还是第三级页面。我需要根据页面网址而不是点击来执行此操作，因为该网站确实有很多直接从 Google 到特定页面的链接，因此我还需要显示这些链接的位置。

请注意，文件结构是扁平的，因此每个 url 为 http://www.thesite.com/about.htm等等

我一直在尝试从之前的问题中解决这个问题，但就是无法让它发挥作用。我猜这是因为菜单的深度，但我真的很感激任何人能给我的任何指导。

<小时/>

感谢您的所有帮助。这确实让我走上了正轨。最后我使用了以下内容:-

/* The following adds active to the next level up of the url */
$('#MenuBar1 li a').each(function() {
 if(filename == $(this).attr('href')) {
      $(this).addClass('active');
 }
});

/* The following line looks for the .active class, then the parent of it with the #navbar ul.... structure, then adds the active class to that one only */
$('.active').parents('#navbar ul.MenuBarHorizontal li').addClass('active-top');
$('#navbar ul.MenuBarHorizontal>li').addClass('menu-top');

它的作用是使用 jQuery 将 .active 类添加到特定链接，然后将 .active-top 添加到父级(不幸的是，所有这些都是因为我无法弄清楚如何定位我想要的级别)。最后一行将 .menu-top 类添加到菜单的顶层。

这种结构让我可以只定位菜单的顶层，而无需将格式从 DOM 向下传递到其他子选择器。它可能不是最优雅的解决方案，但它确实有效。

再次感谢所有给我建议的人。

Answer 1

您可以使用 window.location.pathname 通过 JavaScript 获取当前路径。您可以使用以下方法检查 jQuery:

$("#navbar a[href=" + window.location.pathname + "]").addClass('active');

这会将 active 类添加到 #navbar 中与当前路径具有相同 href 属性的所有 anchor 。您可能需要修剪前导斜杠。