Перемещение рамки 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. пролетов не являются ссылками , анкеры.
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); 
}) 

;

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"}); 
    });