2

我的页面上有一个响应式页面选择器。我正在尝试为当前活动元素创建彩色背景。当前代码适用于 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 元素演示与3 元素演示

4

1 回答 1

1

确实，您的 index() 被滥用：

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)+'%'});
于 2013-05-13T00:48:46.170 回答