具有活动导航的动态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的高度固定，没有背景图像 点击从所有兄弟姐妹中删除背景图像，并添加背景图像，其中x偏移元素宽度 - 箭头图像的大小。

Answer 2

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