3

正如您可能会说的，我今天正在学习 jQuery（以及其他网络内容）。

当我拥有的变量与 LI 中的 A 上的 HREF 的内容匹配时，我试图巧妙地将 LI 的类更改为活动。

它的结构如下：

<li><a href="foo.html">Foo</a></li>

当我的“page”变量等于“foo.html”时，我想将 li 的类更改为活动。如下：

<li class="active"><a href="foo.html">Foo</a></li>

我知道有一种适度简单的方法，但我这样做的方式似乎完全错误！

顺便说一句，值得记住（因为这是我摔倒的地方）这是一个菜单，并且有许多 LI，例如：

<li class="active"><a href="foo.html">Foo</a></li>
<li><a href="bar.html">Bar</a></li>

非常感谢，克里斯

4

3 回答 3

5

这应该有效：

$('a[href="foo.html"]').closest("li").addClass("active");

要使用您的页面变量：

$('a[href="' + hrefVariable + '"]').closest("li").addClass("active");

编辑：

解释这是如何工作的：

  • 第一部分 $('a[href="foo.html"]') 将定位页面上所有链接的 href 值为 foo.html。
  • 第二个对象 .closest("li") 将定位距第一部分中找到的元素最近的 li。
  • 第三个对象将类添加到前面的元素，在本例中为 li。
于 2013-04-16T16:16:01.913 回答
2

第 1 步：获取正确的链接元素

首先，您需要找到正确的a标签元素，您可以使用以下属性选择器来做到这一点：

var href = "foo.html";
var a = $("[href='" + href + "']");

步骤 2：获取父列表项元素

parent()然后您可以使用以下函数找到直接父级：

var li = a.parent();

如果它不是直接父级，则可以使用该closest()函数来查找与提供的选择器匹配的第一个祖先。例如：

var li = a.closest("li");

第 3 步：更改班级

最后，您可以使用以下函数将类添加到任何给定元素addClass()：

li.addClass("active");

如果您需要在任何时候删除该类，或删除现有类，您可以使用该removeClass()函数：

li.removeClass("active");

注意：如果您想“重置”所有活动列表元素，您可以轻松执行以下操作：

$("li.active").removeClass("active");

最终结果

这是一个实际的工作示例

于 2013-04-16T16:18:00.430 回答
0

Although you didn't specify it in your question, I assume you'll want to remove the active class from other LIs?

var li = $('.menuClass li'), // menuClass is whatever the class of your menu is (or #menuId for id)
    page = 'foo.html';

li.each(function () {
    var t = $(this); // better performance
    t.removeClass('active'); // remove active class from all
    if (t.find('a').attr('href') === page) { // if the href equals the value of your page variable, add active class
        t.addClass('active');
    }
});
于 2013-04-16T16:29:42.627 回答