javascript - 单击时将 CSS 边框移至右侧

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

假设您不需要动画，只需突出显示事件链接:

1. 跨度不是链接。 anchor 是。
2. 为事件状态创建一个类并在点击时分配该类。

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

快速 Js:

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

---

如果你想要动画，那么:

1. 将链接包装在包装器中，并有一个具有绝对定位的额外元素。
2. onclick，获取链接的位置并将额外元素放置在那里。

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

快速 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);
})

;