Question

我有一个类items的ul和每个类item的li元素。 li元素有一个，我想将li中的特定链接设置为活动状态。 li有不同的ID，如

<ul class="items">
  <li id="id1" class="active hover ">id1 </li>
  <li id="id2" class="active hover ">id2 </li>
  <li id="id3" class="active hover ">id3 </li>
  <li id="id4" class="active hover ">id4 </li>
</ul>

在我的情况下，我想将id 3示例设置为acive。所以我使用下面的id。

if(active.item) {
    var patt = new RegExp("id2");
    if(page.language() === 'FR' && patt.test(active.item.id)){
        document.getElementById("id2").addClass('active');
        document.getElementById("id2").addClass('hover');
    }
    else{
        active.item.addClass('active');
        active.item.addClass('hover'); 
    }
}

我在控制台中打印我的active.item，它在下面给我

console.log("Active item is ", active.item);

结果

[li＃id2.item.fr-hide，prevObject：_.fn.init [1]，context：a.link.pjaxload] 0：li＃top2.item.fr-hide.active.hovercontext：a .link.pjaxloadlength：1prevObject：_.fn.init [1] proto ：_ [0]。

我的身份证是id2。但是，我的active和hover cssClass没有添加到我的元素中。请问哪里出错了。在我做之前

"id2".test(active.item.id)

以上返回错误说＆＃34; id2＆＃34; .test不是函数。我改为上面的patt变量进行测试。

请问为什么我的活动和悬停类没有添加？任何帮助将不胜感激。

Answer 1

因为addClass（）是一个jquery方法。你试图将它应用于dom元素。试试这个

$("#id2").addClass('active');

见这个例子，

$("li").hover(function () {
    $(".active").removeClass("active");
    $(this).addClass("active");
});

Fiddle

Answer 2

我无法完全理解您要实现的目标，但至于为什么您的active和hover类没有被添加到此处存在问题：

document.getElementById("id2").addClass('active');
document.getElementById("id2").addClass('hover');

这里是混合JavaScript和jQuery。它应该是这样的JavaScript：

document.getElementById("id2").setAttribute("class", "active hover");

或者像这样的jQuery：

$("#id2").addClass('active hover');

Answer 3

正如Anoop Joshi所说，你可以使用jQuery。

如果你不使用jQuery：

document.getElementById("id2").className += " active hover"

您还可以将classList与add和remove

一起使用

更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

在liQuery中设置li元素类是活动的

3 个答案: