滚动到活动选项卡 [英] scroll till active tab

问题描述

这个问题是基于我的最后一个问题.

This question is based on my last question.

显示或显示可见的活动标签

有些问题我必须解决，所以我已经解决了.但我仍然无法使其正常运行.

there were some issues that I have to fix so I have fixed. but still I can't make it work properly.

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

Like I want to scroll left and right active/clicked tabs to show. please have look to jsfiddle example. such as: when I click on overflowed tab 5 and it should show visible. then from 1 till 4 will be overflowed (hidden) so now If I click on 2 (2 click) then it should scroll to right and show it visible. In reality, there will be N number of list(li) elements.

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

I just found don't know why but jsfiddle example doesn't work on IE.

谢谢...

Jsfiddle

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");
});

推荐答案

尝试一下:

 $(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的元素

Also, it isn't recommended to have two elements with the same ID

这篇关于滚动到活动选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！