1回答

好帮手慕星星

2019-07-05

已采纳

你好，这部分代码是给导航项的下划线定义的方法，在方法中设置了下划线的位置，可以参考下面代码中的解释：

// 滑动门
// 获取下划线
var navTip = getElem('.header__nav-tip');
//定义事件，参数是每个导航项索引以及所有导航项
var setTip = function(idx, lib) {
    // 通过索引获取当前导航项绑定移入事件
    lib[idx].onmouseover = function() {
        console.log(this, idx);
        // 设置下划线的left值，当前索引*70，意思是移入到哪个导航项，下划线跟着移动
        navTip.style.left = (idx * 70) + 'px';
    }
    // 初始化currentIdx变量为0
    var currentIdx = 0;
    // 给当前导航项绑定移出事件
    lib[idx].onmouseout = function() {
        console.log(currentIdx);
        // 循环遍历所有导航项
        for (var i = 0; i < lib.length; i++) {
            // 获取每一个导航项的class值，如果导航项有active样式
            if (getCls(lib[i]).indexOf('header__nav-item_status_active') > -1) {
                // 将当前导航项的索引赋值给currentIdx变量（记录当前有样式的导航项）
                currentIdx = i;
                // 结束代码
                break;
            }
        }
        // 将下划线定位设置在有active样式的导航下面
        navTip.style.left = (currentIdx * 70) + 'px';
        // 设置currentIdx变量的目的是：如果鼠标只是移入其中一个导航项，，下划线跟着移动，并没有点击导航项添加上active样式，那么鼠标移出的时候下划线还会回到前一个有active样式的下面
    }

}
// 遍历所有导航项

for (var i = 0; i < navItems.length; i++) {
    // 调用setTip方法，传入索引以及所有导航项
    setTip(i, navItems);
}

自己再理解下，祝学习愉快！

0