滚动到活动标签

Question

这个问题是基于我的上一个问题。

show or make visible active tab

有一些问题我必须解决，所以我已经解决了。但我仍然无法使其正常工作。

就像我想左右滚动活动/点击的标签来显示。请查看 jsfiddle 示例。例如：当我单击溢出的选项卡 5 时，它应该显示可见。然后从 1 到 4 将被溢出（隐藏）所以现在如果我点击 2（2 点击）那么它应该向右滚动并显示它。实际上，会有 N 个 list(li) 元素。

我刚刚发现不知道为什么，但是 jsfiddle 示例在 IE 上不起作用。

谢谢...

Jsfiddle

$(document).on('click', '.liClicked', function () {
    var idValue = ($(this).attr('id'));
    console.log(idValue);
    var idValues = ($(".element ul li#" + idValue));
    console.log(idValues);

    // $(idValues).css('left','-50px');

    $('.element').animate({
        "left": "-=50px",
    }, "slow")

});

$("#right").click(function () {
    var calcs = ($('ul li#tab1').width());

    $(".element").animate({
        "left": "+=" + calcs,
    }, "slow");
});

$("#left").click(function () {
    $(".element").animate({
        "left": "-=50px"
    }, "slow");
});

Answer 1

试试这个：

 $(document).on('click', '.liClicked', function() {
    var idValue  = ($(this).attr('id'));
     console.log(idValue);
     var idValues = ($(".element ul li#" + idValue));
     console.log(idValues);

     // $(idValues).css('left','-50px');


     var me = $(this);
     $('.element').animate({
         "left": $('li#' + me.prop('id')).position().left * -1 ,
     }, "slow")

 });

另外，不建议有两个具有相同 ID 的元素