jQuery 菜单 - 基于 URL 的活动状态 [英] jQuery Menu - Active State Based on URL
问题描述
我只是想将活动状态改造成静态 html 菜单.菜单具有以下结构:-
您可以看到这是一个 3 级菜单系统，实际上显示为一个超级菜单.
我想做的是，根据您所在页面的 URL，在顶级菜单中添加一个活动状态.此活动状态需要显示您是在二级页面还是三级页面上.我需要根据页面 url 而不是点击来执行此操作，因为该网站确实有很多直接从 Google 到特定页面的链接，因此我还需要显示这些链接的位置.
请注意，文件结构是扁平的，因此每个 url 都是 http://www.thesite.com/about.htm 等
我一直试图从以前的问题中解决这个问题，但就是无法让它发挥作用.我猜这是因为菜单的深度，但非常感谢任何人能给我的任何指导.
<小时>感谢您的帮助.这真的让我走上了正轨.最后我使用了以下内容:-
/* 下面将active添加到上一级url */$('#MenuBar1 li a').each(function() {if(filename == $(this).attr('href')) {$(this).addClass('active');}});/* 下面这行查找 .active 类，然后是它的父类，它带有 #navbar ul.... 结构，然后只将活动类添加到那个类中 */$('.active').parents('#navbar ul.MenuBarHorizontal li').addClass('active-top');$('#navbar ul.MenuBarHorizontal>li').addClass('menu-top');这样做是使用 jQuery 向特定链接添加一个 .active 类，然后向父链接添加一个 .active-top(不幸的是，所有这些都是因为我无法弄清楚如何只定位我想要的级别).最后一行在菜单的顶层添加了一个 .menu-top 类.
这种结构让我可以只定位菜单的顶层，而无需将格式从 DOM 向下传递到其他子选择器.这可能不是最优雅的解决方案，但确实有效.
再次感谢所有给我建议的人.
您可以通过 JavaScript 使用 window.location.pathname 获取当前的路径.您可以使用以下内容检查 jQuery:
$("#navbar a[href=" + window.location.pathname + "]").addClass('active');这会将 active 类添加到 #navbar 中与当前路径具有相同 href 属性的所有锚点.您可能需要修剪前导斜杠.
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.
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.
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');
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.
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.
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');
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屋！
