jQuery菜单-基于URL的活动状态

我只是尝试将活动状态改装为静态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>

它的作用是使用jQuery将.active类添加到特定链接，然后将.active top添加到父级（不幸的是，所有父级都是如此，因为我无法确定如何只针对我想要的级别）。最后一行将.menu顶级类添加到菜单的顶级

这种结构允许我只针对菜单的顶层，而不需要将格式沿DOM向下传递到其他子选择器。这可能不是最优雅的解决方案，但确实有效

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

您可以使用

window.location.pathname

使用JavaScript获取当前路径。您可以使用以下方法使用jQuery进行检查：

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

---

这将把

active

类添加到

#navbar

中与当前路径具有相同

href

属性的所有锚点。您可能需要修剪前导斜杠。

使用

window.location.href

获取浏览器的当前URL位置。。。和

addClass（）

向链接添加类名。。。在MyCase中，我正在添加

active

试试这个

 <script>
 $(function(){
    var currenthref=window.location.href;
    $("#navbar a[href=" + currenthref + "]").addClass('active');  //adds active class to the current url.

})
</script>

$（函数（）{
var currenthref=window.location.href；
$（“#导航栏a[href=“+currenthref+”]）。addClass（'active'）；//将活动类添加到当前url。
})

您可以这样做：

var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);

$('#MenuBar1 a').each(function() {
     if(filename == $(this).attr('href')) {
          $(this).addClass('active');
     }
});

http://www.thesite.com/about.htm 

如果需要将该类应用于li，请执行以下操作：

var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);

$('#MenuBar1 a').each(function() {
     if(filename == $(this).attr('href')) {
          $(this).addClass('active');
     }
});

http://www.thesite.com/about.htm 

var url=window.location.pathname； var filename=url.substring（url.lastIndexOf（'/'）+1）

上面的回答可能不正确，因为它们会给出完整的路径名，因此如果您的url如下所示：

var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);

$('#MenuBar1 a').each(function() {
     if(filename == $(this).attr('href')) {
          $(this).addClass('active');
     }
});

http://www.thesite.com/about.htm 

“window.location.pathname”将返回以下内容：

/about.htm

因此，您需要执行类似的操作，以便保留现有的标记并获得所需的结果，或者您可以在href的前面加上斜杠

var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);

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

---

在此处签出小提琴：

---

谢谢你的回复，我不得不做一些调整，但最终还是成功了。困难的一点是，当你是1级、2级或3级时，如何定位菜单的顶层。最后，我使用了jQuery，如上图所示。@SimonGriffiths请投票并接受有助于您使用它的答案，它对我非常有用。不要忘记设置变量

var url=window.location.pathname；var filename=url.substring（url.lastIndexOf（'/'）+1）