jQuery菜单-基于URL的活动状态 [英] jQuery Menu - Active State Based on URL

问题描述

我只是试图将活动状态改成静态html菜单.菜单具有以下结构:-

I am just trying to retrofit an active state into a static html menu. The menu has the following structure: -

<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>

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

You can see that this is a 3 level menu system which actually displays as a mega menu.

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

What I would like to do is, based on the URL of the page you are on, add an active state to the top level menu. This active state would need to show whether you are on a second or third level page. I need to do this based on the page url rather than a click as the site does have quite a lot of links directly from Google to specific pages, so I will need to show where those sit too.

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

Note that the file structure is flat so each url is http://www.thesite.com/about.htm etc.

我一直在尝试从以前的问题中解决这个问题，但是无法使其正常工作.我猜这是因为菜单的深度，但我真的很感谢任何人都可以给我的指导.

I've been trying to sort this out from previous questions, but just can't get it to work. I'm guessing that's because of the depth of the menu, but would really appreciate any guidance anyone can give me.

感谢您的所有帮助.这确实使我走上了正确的道路.最后，我使用了以下内容:-

THANKS for all your help. This really put me on the right track. In the end I used the following: -

/* 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类.

What this does is used jQuery to add an .active class to the particular link, then adds an .active-top to the parents (all of them unfortunately as I couldn't work out how to target just the level I wanted). The last line adds a .menu-top class to the top level of the menu.

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

This structure lets me target just the top level of the menu without the formatting flowing down the DOM to other child selectors. It probably isn't the most elegant solution, but it does work.

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

Thanks again to everyone who gave me advice.

推荐答案

您可以使用JavaScript使用window.location.pathname获取当前的路径.您可以使用类似以下内容的jQuery进行检查:

You can get the current path with JavaScript using window.location.pathname. You can check with jQuery using something like:

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

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

This will add the active class to all anchors in #navbar that have the same href attribute as the current path. You may need to trim the leading slash.

这篇关于jQuery菜单-基于URL的活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！