使用jQuery-can'的主动导航；不要将默认类应用于锚点

我目前正在尝试制作一个

导航菜单

，其中一个

活动类

应用于其

href

属性与当前URL匹配的锚，因此我可以以某种方式设置该锚，使其从菜单的其余部分中脱颖而出

这是我的分数：

<div id="sidebar">

  <h2>Navigation menu</h2>
  <h2 class="subnav"><a href="menu1/menu_item1">Menu item 1</a></h2>
  <h2 class="subnav"><a href="menu1/menu_item2">Menu item 2</a></h2>
  <h2 class="subnav"><a href="menu1/menu_item3">Menu item 3</a></h2>
  <h2 class="subnav"><a href="menu1/menu_item4">Menu item 4</a></h2>
  <h2 class="subnav"><a href="menu1/menu_item5">Menu item 5</a></h2>

</div> 

我正在用jQuery应用活动类，只要锚href和位置url之间存在匹配，它就可以正常工作。如果url与任何锚点都不匹配，我希望活动类应用于

$top\u项

。我的jQuery的这一部分不起作用

---

我看不出错误是什么，但我还是有点像Javascript/jQuery n00b。任何帮助都将不胜感激。

尝试一下这段代码，这是我为我工作的公司准备的东西

// highlight tab function
var path = location.pathname;
var home = "/";
$("a[href='" + [path || home] + "']").parents("li").each(function() {   
    $(this).addClass("selected");
});

---

我想你可以简化一下：

function highlightSelected()
{
  $("h2.subnav a").each(
    function()
    {
      if (location.pathname.indexOf(this.href) > -1)
      {
        $(this).addClass("selected");
      }
    }
  );
}

---

这应该是您想要的：标记匹配链接，如果不匹配，则标记默认链接。

function markActiveLink() {

    //Look through all the links in the sidebar
   $("div#sidebar a").filter(function() {

      //Take the current URL and split it into chunks at each slash
      var currentURL = window.location.toString().split("/");

      //return true if the bit after the last slash is the current page name
      return $(this).attr("href") == currentURL[currentURL.length-1];

    //when the filter function is done, you're left with the links that match.
    }).addClass("active");

   //Afterwards, look back through the links. If none of them were marked,
   //mark your default one.
   if($("div#sidebar a").hasClass("active") == false) {
      $("div#sidebar h2:nth-child(2) a").addClass("active");
    }
 }

markActiveLink();

---

此外，我还找到了关于这个的官方教程-滚动到底部查看jQuery代码。它比我的更紧，虽然它不适合你的情况。

很好的阅读。。但是，我得提个建议。。即使JS工作得很好，您也应该将所有菜单列表项保持在无序列表（或有序列表）中，。。作为最佳实践……）

$all_items是一个jQuery对象，其中包含一组匹配的链接-如果要检查每个链接的href，则需要使用类似.each（）的内容循环。例如：$all_items.each（function（）{alert（$（this.attr（“href”）；}）；第一部分工作得很好，只是需要调整一下以适应我的url方案。然而，我无法让最后一个片段正常工作。我用Firebug检查源代码，它显示没有一个锚具有“active”类。我认为最后一行的选择器语法是问题所在。我已经编辑过了。这行吗？

function markActiveLink() {

    //Look through all the links in the sidebar
   $("div#sidebar a").filter(function() {

      //Take the current URL and split it into chunks at each slash
      var currentURL = window.location.toString().split("/");

      //return true if the bit after the last slash is the current page name
      return $(this).attr("href") == currentURL[currentURL.length-1];

    //when the filter function is done, you're left with the links that match.
    }).addClass("active");

   //Afterwards, look back through the links. If none of them were marked,
   //mark your default one.
   if($("div#sidebar a").hasClass("active") == false) {
      $("div#sidebar h2:nth-child(2) a").addClass("active");
    }
 }

markActiveLink();