jquery - 具有活动导航的动态 CSS 箭头位置

Question

我试图弄清楚单击后如何将箭头移动到列表项的中心。单击后，该类将变为活动状态，并且需要根据列表项的中心更新三角形的位置。不确定我是否以正确的方式进行此操作，认为可能有更有效的方法来做到这一点。

$('.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/

Answer 1

由于您已经将箭头显示为伪元素，因此可以使其显示在 li.active 上，因此您可以从中获取位置

Answer 2

使 li 的高度固定，单击时没有背景图像从所有兄弟姐妹中删除背景图像，并添加元素宽度的 x 偏移量的背景图像 - 箭头图像的大小。