水平导航栏上的标题 fullpage.js

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

Title on horizontal navigation bar with dots in fullpage.js

html

javascript

fullpage.js