Question

我想动画第一个链接的轮廓/边框移动到右边，当你点击第二个链接时，右边的第二个链接移动到第三个链接，等等。

<span style="font-size:9px;text-transform:uppercase;">
  <span style="border: 1px #000 solid;border-radius: 3px;padding: 5px;margin-right: 9px;">Link 1</span>    
  <span style="color:#32CD32">Link 2</span>    
  <span style="color:#32CD32">Link 3</span>    
  <span style="color:#32CD32">Link 4</span>
</span>

这是JSFiddle

http://jsfiddle.net/k7pp7/

很好奇你将如何做到这一点。

Answer 1

假设您不需要动画，只需要突出显示活动链接：

跨度不是链接。锚点是。
为活动状态创建一个类，并在点击时分配该类。

快速示例：http://jsfiddle.net/abhitalks/k7pp7/26/

Quick Js ：

$('a').on("click", function() {
    $('a').removeClass('active');
    $(this).addClass('active');
});

如果你想要动画，那么：

将链接包装在包装器中，并使用绝对定位的额外元素。
onclick，获取链接的位置并在那里放置额外的元素。

快速示例：http://jsfiddle.net/abhitalks/4xafT/1/

Quick Js ：

$('a').on("click", function() {
    var $active = $('.active'),
        pos = $(this).position();

    $active.show().animate({
        'top': pos.top, 
        'left': pos.left,
        'width': $(this).width() + 8
    }, 500);
})

Answer 2

您可以使用列表并执行以下操作：

    $('#yourULID > li').click(function(){
    $(this).css({"border": "","border-radius": "","padding": "","margin-right":"","color":"#32CD32"});
    $(this).next().css({"border": "1px #000 solid","border-radius": "3px","padding": "5px","margin-right":"9px"});
    });

单击时将CSS边框移动到右侧

2 个答案: