带有活动导航的动态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箭头位置

回答

相关问题