活动链接 jquery superfish

Posted 2023-03-05

【中文标题】活动链接 jquery superfish

【英文标题】：Active links jquery superfish

【发布时间】：2011-05-25 13:24:49

【问题描述】：

我有一个问题。 我使用具有以下结构的 jquery superfish 菜单

<div id="menu" class="ge-navigation-item">
  <!-- navigation -->
    <ul id="test" class="sf-menu sf-vertical sf-js-enabled sf-shadow">
      <li><a href="index.html">Home</a></li>
      <li><a href="#">About</a>
        <ul>
          <li><a href="index.html">Index</a></li>
          <li><a href="#">Page</a>
                            <ul>
                                <li><a href="#">menu item</a></li>
                                <li><a href="#">menu item</a></li>
                                <li><a href="proef.html">menu item</a></li>
                                <li><a href="index.html">index</a></li>
                                <li><a href="#">menu item</a></li>
                            </ul>
          </li>
          <li><a href="page-fullwidth.php">Page - Full Width</a></li>
        </ul>
      </li>
      <li><a href="showcase.php">Showcase</a></li>
    </ul>
    <!-- /navigation -->
  </div>

我想要的是点击一个链接，菜单结构将是可见的

所以点击 index.html 会在所有带有 href index.html 的链接上设置一个链接 但是点击 proef.html 会在 href proef.html - Page - About

上设置一个活动类

到目前为止，我已经尝试过了，但结果很糟糕

var path = window.location.toString().split("/")
path = path[path.length - 1]
//alert (path);
if (path)
$("#test a[href='" + path + "']").addClass("actief");
$("#test ul li:has(a) a[href='" + path +
     "']").parent().parent().parent().addClass("actief");

【参考方案1】：

欢迎来到***。试试这个：

var path = window.location.pathname.split('/');
path = path[path.length-1];

if (path !== undefined) 
    $("#menu3").find("a[href='" + path + "']").addClass("actief");

这应该将类应用于与当前 url 的最后一项匹配的任何链接。如果您正在寻找不同的行为，请详细说明！

更新 实际上，看起来你需要这个：

var path = window.location.pathname.split('/');
path = path[path.length-1];

if (path !== undefined) 
    $("#menu3")
        .find("a[href$='" + path + "']") // gets all links that match the href
        .parents('li')  // gets all list items that are ancestors of the link
        .children('a')  // walks down one level from all selected li's
        .addClass('actief');

这会将类放在链上的每个 a 元素上。

【讨论】：

这有效，但仅适用于活动链接。单击 proef.html 还应该在 - Page - About Thanks

上设置一个活动类

我让它变得更好了。您应该使用我的更新版本更新您的脚本。我不知道我为什么要像第一次那样做。

我做到了，谢谢。我添加了一个小细节。 if (!path) path = 'index.html'; 所以当没有设置链接时，默认菜单项会突出显示

不错的解决方案斯蒂芬，我只建议小更新，如果 包含 不是 匹配 路径，则检查 href，因为如果您的解决方案不起作用链接 href 的路径很长，其中包含多个斜杠，例如“something/something/page.htm”。解决方案：.find("a[href$='" + path + "']")

非常好的答案！ *** 摇滚...添加到@Klikerko：如果有人感兴趣，这里是属性的不同选择器：***.com/a/303961/114029

【参考方案2】：

我们做了类似的事情：

$("#sample-menu-1").find("a[href='"+window.location.pathname+"']").each(function() 
$(this).parents('li').addClass("current");
$(this).closest('ul').css("visibility","visible").css("display","block");
);

它似乎可以工作，但是在将鼠标悬停在菜单上时，菜单不会保持当前位置。

=== 更新 ===

鼠标悬停在菜单上后，父级 ul 似乎被重置为不显示

【讨论】：

其实这个方案是最好的。选择的答案与嵌套菜单有问题。谢谢！