2

我只是想将活动状态改造成静态 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，将活动状态添加到顶级菜单。此活动状态需要显示您是在第二级还是第三级页面上。我需要根据页面 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 向下传递到其他子选择器。它可能不是最优雅的解决方案，但它确实有效。

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

4

4 回答 4

2

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

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

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

于 2013-01-17T05:22:01.490 回答
1

你可以这样做：

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 文件名 = url.substring(url.lastIndexOf('/')+1);

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

上面的响应会不正确，因为它们会给出完整的路径名，所以如果你的 url 是这样的：

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');
于 2013-01-17T05:37:58.137 回答
0

用于window.location.href获取浏览器的当前 URL 位置...并将addClass()类名添加到链接... inmycase 我正在添加active

尝试这个

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

})
</script>
于 2013-01-17T05:23:35.553 回答
0

在这里查看小提琴：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');
  }
});
于 2013-01-17T06:00:42.093 回答