Question

我想在点击时更改活动标记而不是悬停，但它无法正常工作。当我把它改成.hover它仍在工作但不是我想要的解决方案。

我如何才能在.click上实现这一目标？

Greets and thx寻求帮助！

// DOM Ready
$(function() {

/*
    EXAMPLE ONE
*/

/* Add Magic Line markup via JavaScript, because it ain't gonna work without */
$("#example-one").append("<li id='magic-line'></li>");

/* Cache it */
var $magicLine = $("#magic-line");

$magicLine
    .width($(".selected").width())
    .css("left", $(".selected a").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

$("#example-one li").find("a").click(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();

    $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
    });
 }, function() {
    $magicLine.stop().animate({

    });    
 });

});

Answer 1

您的代码段不会更改当前单击元素的类。你应该尝试这样的事情：

<强> CSS

#example-one li a:hover { 
 /* reset default style properties */
}
#example-one li a.hover { color: red }

<强>使用Javascript：

$("#example-one li").find("a").click(function(e) {
   e.preventDefault(); // stop default action on this element when someone perform a click
   var element = $(this); // assign the current clicked jquery object to element

   if (element.hasClass('hover')) {
      element.removeClass('hover');
   } else {
      element.addClass('hover');
   }
});

单击时更改活动标记位置

1 个答案: