Question

我正在使用fullpage.js设计网站。我想给水平导航栏中的每个点赋予标题。

function addSlidesNavigation(section, numSlides){
        section.append('<div class="fp-slidesNav"><ul></ul></div>');
        var nav = section.find('.fp-slidesNav');

        //top or bottom
        nav.addClass(options.slidesNavPosition);

        for(var i=0; i< numSlides; i++){
            nav.find('ul').append('<li><a href="#"><span></span></a></li>');
        }

        //centering it
        nav.css('margin-left', '-' + (nav.width()/2) + 'px');

        nav.find('li').first().find('a').addClass('active');
}

函数调用来自：

if(options.slidesNavigation){
    addSlidesNavigation($(this), numSlides);
}

此功能生成水平导航栏。我想为每个人添加标题。我不知道怎么做。请帮忙。

Answer 1

我按照以下方式做到了。

在索引页面中：horizontalNavigationToolTip = ['tooltip1','tooltip2'],

在jquery.fullpage.js中：

function addSlidesNavigation(section, numSlides){
        section.append('<div class="fp-slidesNav"><ul></ul></div>');
        var nav = section.find('.fp-slidesNav');

        //top or bottom
        nav.addClass(options.slidesNavPosition);

        for(var i=0; i< numSlides; i++){
            //nav.find('ul').append('<li><a href="#" title="'+ tooltip[i] +'"><span></span></a></li>');

            // Only add tooltip if needed (defined by user)
            var tooltip = options.horizontalNavigationToolTip[i];

            var li = '<li><a class="tooltips" href="#"><span></span><div><img src="images/tooltip/'+ tooltip +'.png" /></span></div></a>';
            li += '</li>';

            nav.find('ul').append(li);
        }

        //centering it
        nav.css('margin-left', '-' + (nav.width()/2) + 'px');

        nav.find('li').first().find('a').addClass('active');
    }

希望这对其他人有所帮助。

水平导航栏上的标题，在fullpage.js中有点

1 个答案: