Question

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

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

结构如下：

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

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

<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>

非常感谢，克里斯

Answer 1

这应该有效：

$('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。

Answer 2

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

首先，您需要找到正确的a代码元素，您可以使用以下attribute selector执行此操作：

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");

最终结果

Here is a working example in action

Answer 3

虽然你没有在你的问题中指明它，但我假设你想要从其他LI中删除活动类？

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');
    }
});

根据HREF值切换父元素的类jQuery

3 个答案: