0

这是我的html：

<dl>
<dt>Options 1</dt>
<dd>Link 1</dd>
<dd>Link 2</dd>
<dd>Link 3</dd>
<dt>Option 2</dt>
<dd>Link 4</dd>
<dd>Link 5</dd>
<dd>Link 6</dd>
</dl>

我已经创建了一个插件来实现我想要的这个菜单的效果。这是我的插件：

(function($) {
    $.fn.Pointer = function() {
        var txt, y;
        txt = $(this);
        txt.on("click", function(event){
            y=event.pageY;
            y = y - 15;

            //animate pointer
            $('#pointer').animate({ 'top' : y + 'px'});
            //adding hover class to selected links
            txt.addClass("select_menu");
        });
    };
})( jQuery );

$("dd").each(function(){
    $(this).Pointer();
});

插件效果的快速解释。我有一个带有箭头的 div，它指向您单击的链接。每次单击时，箭头都会滑动到单击的新链接（此滑块工作正常）。我也有点击链接更改类。这是我的第一个问题。当您单击链接 1 时，将应用该类。我想要做的是单击链接 2 和应用于链接 1 的上一个类，我想清除该类并将该类应用于新单击的链接。我无法从之前点击的链接中删除课程。有人可以帮我弄这个吗？

我希望解释足够清楚。

4

2 回答 2

0

根据我从您的问题中了解到的情况，您可以尝试这样的方法来删除和添加类：

$(".arrow").click(function(){
    $(".myClass").removeClass("myClass");
    $(this).addClass("myClass");
});
于 2013-01-13T20:55:45.497 回答
-1

让插件作用于一整组项目，然后在重新应用之前从所有项目中清除类。即结构它是这样的：

$.fn.Pointer = function() {
  var $group = this;
  $group.on('click.Pointer', function() {
    var $link = $(this);

    $group.removeClass('select_menu')
    $link.addClass('select_menu')
  });
};

$('dd').Pointer();

无论您调用哪组元素.Pointer()，都只会将.select_menu类应用于其中的一个元素。

Codepen 示例：http ://codepen.io/anon/pen/hidFq

于 2013-01-13T21:02:21.167 回答