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到特定网页的链接，因此我需要显示这些链接的位置。

请注意，文件结构是扁平的，因此每个网址都是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属性的所有锚点。您可能需要修剪前导斜杠。

Answer 2

你可以这样做：

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

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

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

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

$('#MenuBar1 a').each(function() {
     if(filename == $(this).attr('href')) {
          $(this).parent('li').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');

Answer 3

使用window.location.href获取浏览器的当前网址位置...并addClass()为链接添加类名... inmycase我正在添加active

试试这个

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

})
</script>

Answer 4

点击这里的小提琴：http://jsfiddle.net/EVmsY/

$(function(){
  var url = 'http://www.thesite.com/product1.htm'; // window.location;
  var page = url.substr(url.lastIndexOf('/') + 1);

  if (page) {
    $('#MenuBar1 li a[href="' + page + '"]').addClass('active');
    $('.active').parents().children('li a').addClass('active');
  }
});

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

4 个答案: