Javascript 单击鼠标右键移动CSS边框

我想动画移动的轮廓/边界的第一个链接的权利是在第二个链接的权利，当你点击第二个链接，第三个链接相同，等等

<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>

链接1
链接2
链接3
链接4

这是JSFIDLE

---

我很好奇你会怎么做。

你可以使用一个列表，做如下事情：

    $('#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"});
    });

---

假设不需要动画，只需高亮显示活动链接：

跨距不是链接。主播是

为活动状态创建一个类，并在单击时指定该类

快速样本：

快速Js：

---

如果需要动画，则：

将链接包装在包装器中，并具有具有绝对位置的额外元素

单击后，获取链接的位置并将额外的元素放置在那里

快速样本：

快速Js：

---

)

编写代码将是一个良好的开端。你没有…你想给它设置动画吗？我认为你需要使用一个额外的HTML元素，它有边框等等，并将其动画化。这非常完美，非常感谢。我怎样才能得到它，使边界开始在第一个链接上？而不仅仅是在我点击一个项目时出现。@user1982011:这很简单。绑定click事件后，在domready中的第一个锚点上触发单击。请看这里：

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

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

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