ページにレスポンシブ ページ セレクターがあります。現在アクティブな要素の色付きの背景を作成しようとしています。現在のコードは 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");
});