將CSS邊框向右移動

我想要將第一個鏈接的輪廓/邊框向右移動，以便在點擊第二個鏈接時將第二個鏈接移至右側，同樣的第三鏈路等將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>

這是的jsfiddle

http://jsfiddle.net/k7pp7/

很好奇，你會怎麼做。

來源

2014-01-15 user1982011

編寫代碼將是一個好的開始。你沒有... –

你想要動畫嗎？我認爲你需要使用一個額外的具有邊框等元素的HTML元素併爲其添加動畫。 – putvande

假設你不需要動畫，你只需要突出活動鏈接：

跨度是不是鏈接。錨點。
爲活動狀態創建一個類並在點擊時分配該類。

快速樣品：http://jsfiddle.net/abhitalks/k7pp7/26/

快速的js：

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

如果你想要的動畫，然後：

包裹中的鏈接一個包裝和一個額外的元素與絕對定位。
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); 
})

;

來源

2014-01-16 13:43:13 Abhitalks

這非常完美，非常感謝。我如何得到它，所以邊界開始在第一個鏈接？而不僅僅是當我點擊一個項目時出現。 – user1982011

@ user1982011：很簡單。在綁定單擊事件後，點擊domready中的第一個錨點。看到這裏：http://jsfiddle.net/abhitalks/4xafT/2/ – Abhitalks

您可以使用一個列表，做這樣的事情：

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

來源

2014-01-16 13:17:46

將CSS邊框向右移動

回答

相關問題