Question

我的页面上有一个响应式页面选择器。我正在尝试为当前活动元素创建彩色背景。当前代码适用于2个元素，但如果我再添加，则定位将无效。这可能与我对.index() jQuery函数缺乏了解有关。

以下是控制背景位置的JavaScript代码:( $.parseURL()函数只测试页面的URL，然后此代码将其与给定的列表元素匹配）

$.pageSlider = function(todo){
    if (todo === 'update'){
        $('.pageSlider a.active:not([href="'+$.parseURL().hash+'"])').removeClass('active');
        $('.pageSlider a[href="'+$.parseURL().hash+'"]').addClass('active');
        $('.pageSlider').each(function(){
            var $this = $(this);
            var $slideBtn = $this.find('a.slide-button');

            var $navs = $this.find('a[href]');
            var navsSize = $navs.size();
            var percent = 100/navsSize;
            var actNavIndx = $navs.index('a.active');

            $navs.css('width',percent+'%');
               console.log(actNavIndx);
            $slideBtn.css('width',percent+'%').animate({left:((actNavIndx*-1)*percent)+'%'});
        });
        return $('.pageSlider a.active[href="'+$.parseURL('/index.php').hash+'"]');
    }
};
window.location.hash = 'lounge';
$.pageSlider("update");
$(window).on('hashchange',function(){
    $.pageSlider("update");
});

2 element demo与3 element demo

Answer 1

确实你的索引（）被误用了：

var actNavIndx = $navs.index('a.active');

应该是：

var actNavIndx = $this.children('a.active').index();

和你的动画：

$slideBtn.css('width',percent+'%').animate({left:((actNavIndx*-1)*percent)+'%'});

应该是：

$slideBtn.css('width',percent+'%').animate({left:((actNavIndx)*percent)+'%'});

导航元素的滑动背景仅适用于2个元素，而不是更多

1 个答案: