Question

我有ul列表，每个li都有一个链接。我的问题是：如何从一个a（锚点）中删除“选定”类并将其应用到我悬停的那个？

<ul>
    <li><a href="" class="selected">Link 1</a></li>
    <li><a href="">Link 2</a></li>
    <li><a href="">Link 3</a></li>
    <li><a href="">Link 4</a></li>
    <li><a href="">Link 5</a></li>
</ul>

Answer 1

结帐jquery api：http://api.jquery.com/

jQuery.addClass jQuery.removeClass

$("li").hover(
  function () {
    $(this).addClass('selected');
  }, 
  function () {
    $(this).removeClass('selected');
  }
);

Answer 2

试试这个：

$("ul li a").hover(function(e){
    $("ul li a").removeClass("selected");    
    $(this).addClass("selected");
    e.preventDefault();
});

您从悬停时的所有a标记中删除它，然后将其添加到鼠标所在的标记上。

Answer 3

你需要编写一个选择器来找到正确的节点然后使用方法addClass和removeClass

在这种情况下

$(".selected").removeClass("selected").addClass("unselected");

请注意我是如何将两者联系在一起的。

Answer 4

$('li').mouseover(function(){
     $(this).addClass('selected');
    console.log("adding class");
}
).mouseout(function(){
    $(this).removeClass('selected');
    console.log("removing class");
});

工作样本：http://jsfiddle.net/MdNXZ/

Answer 5

使用以下HTML：

<ul>
    <li><a href="">Link 1</a></li>
    <li><a href="">Link 2</a></li>
    <li><a href="">Link 3</a></li>
    <li><a href="">Link 4</a></li>
    <li><a href="">Link 5</a></li>
</ul>

您要求的JQuery脚本行将是：

$('li').hover( $(this).children('a').toggleClass('selected') );

就是这样。一个班轮。

职能文件：

http://api.jquery.com/hover/

http://api.jquery.com/toggleClass/

http://api.jquery.com/children/

如何使用jQuery添加和删除类？

5 个答案: