帶有活動導航的動態CSS箭頭位置

我想知道如何在點擊後將箭頭移動到列表項目的中心。點擊後，該類將變爲活動狀態，並且需要根據列表項的中心更新三角形的位置。不知道我是否以正確的方式開展工作，認爲可能有更有效的方法來做到這一點。帶有活動導航的動態CSS箭頭位置

$('.sort li.active a').click(function() { 
    var $this = $(this); 
    var offset = $this.offset(); 
    var width = $this.width(); 
    var centerX = offset.left + width/2; 
    console.log(centerX); 
    $('#subheader:after').css('right', centerX); 
});

http://jsfiddle.net/afaQ8/

來源

2013-02-17 coryj

只要你改變類，我d把兩種狀態的樣式放在樣式表中，然後讓CSS處理事情。 – steveax 2013-02-17 02:28:16

我有4個列表項，所以必須有四個不同的狀態，每個位置一個（右：225px，右：--- px等）。我可以使用nth-child來定位不同的列表項目，但是我能否定位#subheader：之後從.sort li.active:nth-child（1）更改位置？所以也許類似.sort li.active:nth-child（1）#subheader：after – coryj 2013-02-17 02:48:58

使李的一個固定的高度上點擊刪除背景圖象沒有背景圖像從所有兄弟姐妹和添加背景圖像，其中x元件寬度的偏移 - 箭頭圖像的大小。

來源

2013-02-17 04:08:12 ajameswolf

既然你已經顯示箭頭作爲一個僞元素，你可以把它顯示在li.active，所以你可以從它那裏得到的位置

來源

2013-02-17 19:28:37 vals

帶有活動導航的動態CSS箭頭位置

回答

相關問題