클릭시 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. 이의 링크를 포장 래퍼 (wrapper)와 절대 위치 지정 (absolute positioning)을 가진 여분의 요소를 가진다.
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"}); 
    });