Question

我试图让导航栏中的背景和li元素在滚动中改变颜色

html导航代码：

<nav  class="navbar navbar-default navbar-fixed-top navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-main">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img src="img/03.svg" style="width:200px;height:80px;position:relative;top:-20px;">
                </a>
            </div>
            <div class="collapse navbar-collapse" id="navbar-main">
                <ul class="nav navbar-nav pull-right navigation-ul">
                    <li >
                        <a href="#login">
                            aa
                        </a>
                    </li>
                    <li class="">
                        <a href="#login">
                            bb
                        </a>
                    </li>
                    <li>
                        <a href="#features">
                            cc
                        </a>
                    </li>
                    <li>
                        <a href="#screens">
                            dd
                        </a>
                    </li>
                    <li>
                        <a href="#payment">
                            ee
                        </a>
                    </li>
                    <li>
                        <a href="#opinions">
                            ff
                        </a>
                    </li>
                    <li>
                        <a href="#tutorial">
                            gg
                        </a>
                    </li>
                    <li>
                        <a href="#why">
                            hh
                        </a>
                    </li>
                    <li>
                        <a href="#contact">
                            ii
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

我通过执行以下JavaScript代码尝试此操作：

const navbar = document.querySelector('.navigation'),
      li = document.querySelectorAll('.navigation-ul li a');

window.addEventListener('scroll', function (){
    if (window.pageYOffset > 80){
        navbar.classList.add('navigation-js');
        for(var i=0; i<=li.length;i++){
            li[i].classList.add('li-js')
        }
    }else{
    navbar.classList.remove('navigation-js');
    for(var i=0; i<=li.length;i++){
            li[i].classList.remove('li-js');
    }
     }

 });

下面的代码给了我 “未捕获的TypeError：无法读取未定义的属性'classList'”，如果我使用“情况就会改变” 的Li [0,1,2 ....]。classList.add（ '丽JS'）” 它工作，但为什么它不适用于循环？我也尝试使用setAttribute等进行循环。

编辑：Javascript代码有效，但是把我解开TypeError：每次滚动时都无法读取未定义的属性'classList'

Answer 1

您的循环终止条件错误：

for(var i=0; i<=li.length;i++){

会导致迭代次数过多。它应该是：

for(var i=0; i < li.length;i++){

如果列表有10个条目，则索引从0到9，而不是0到10。

for语句中断if语句，导航栏在滚动时更改颜色

1 个答案: