Question

我正在尝试将行显示为基于fullpage.js页面的活动部分的指示符。

这个页面有几个部分＆amp;子部分和活动部分应显示为水平红线，直到活动导航。

例如，如果我在第一部分，那么线应该是第一部分的宽度，如果我在部分部分，线宽应该是截面部分的结尾，所以。

handleSubmitValidateInput: function(e){
    e.preventDefault();
    var data = {phone: this._phone.value, pwd: this._pwd.value}
    $.ajax({
        type: 'POST',
        data:data,
        url: 'http://localhost:3000/login',
        success: function(data){
            ReactDOM.render(<Home UserDetails={data}/>, document.getElementById('content'));
            var idleTime = 0;
            var interval = setInterval(function(){
                      // some code
                });
            }, (1000));
        },
        error: function(error){
            console.log('Error login!!');
        }
    });
},

如何使用jquery

执行此操作

Answer 1

由于您的某些网页是菜单中不存在的子网页，因此您必须提取网页并将其保存在不同的变量中：

var visibleMenuSections = $('#myMenu a').map(function() {
    return $(this).attr('href').substr(1);
}).get()

现在这个变量包含一个链接数组：

["one", "two", "three", "four"]

拥有此数组后，您可以使用afterLoad的回调fullpage在每次更改页面后设置hr的内容：

afterLoad: function(anchorLink, index) {
    p = visibleMenuSections.indexOf(anchorLink);
    if (p > -1) {
        $('.nav-wrapper hr').width((p+1) * (100/visibleMenuSections.length) + '%');
    }
}

这是一个有效的jsfiddle：
http://codepen.io/anon/pen/PGOYmA

注意 - 您的html中存在问题 - 菜单中data-menuanchor的值应该是该部分的data-anchor的确切值。

这是jsfiddle的更新版本（有一些css更改）：
http://codepen.io/anon/pen/WGXZaG

jQuery Fullpage - 在菜单上用水平线显示当前部分位置

1 个答案: