点击li没有效果，老师请检查下我的代码，感谢

来源：2-15 BOM特效开发（2）

帅得无心敲代码

2021-09-29 18:25:17

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    body {
      height: 8000px;
    }

    nav#navfloor {
      position: fixed;
      background-color: rgba(128, 128, 128, .5);
      height: 300px;
      width: 160px;
      right: 10px;
      top: 50%;
      margin-top: -150px;
    }

    nav#navfloor li {
      height: 50px;
      line-height: 50px;
      font-size: 24px;
      text-align: center;
      cursor: pointer;
    }

    nav#navfloor li.cur {
      background-color: orange;
    }

    section.content {
      width: 800px;
      background-color: orange;
      margin: 0 auto;
      margin-bottom: 40px;
      font-size: 50px;
      color: white;
      font-weight: bold;
      text-align: center;
    }
  </style>
  <script>
    window.onload = function () {
      // 功能1
      var list = document.getElementById('list');
      list.onclick = function (e) {
        if (e.target.tagName.toLowerCase() == 'li') {
          // 通过自定义属性data-n，获得点击li对应的content
          var n = e.target.getAttribute('data-n');
          var m = document.querySelector('.content[data-n='+ n +']');
          document.documentElement.scrollTop = m.offsetTop;
        }
      }


      // 功能2
      var lis = document.getElementsByTagName('li');
      var contents = document.getElementsByTagName('section');
      // 将各个content的offset值打入数组中
      var contentsArr = [];
      for (var i = 0; i < contents.length; i++) {
        contentsArr.push(contents[i].offsetTop);
      }
      contentsArr.push(Infinity);

      // 监听窗口滚动事件
      var newtop = -1;
      window.onscroll = function () {
        for (var i = 0; i < contentsArr.length; i++) {
          if (document.documentElement.scrollTop >= contentsArr[i] && document.documentElement.scrollTop < contentsArr[i + 1]) {
            break;
          }
        }
        // 得到了循环后的i值
        if (newtop != i) {
          newtop = i;
          console.log(newtop);
        }
        // 创建个新循环，修改导航栏各个li的className
        for (var i = 0; i < lis.length; i++) {
          if (i == newtop) {
            lis[i].className = 'cur';
          }
          else {
            lis[i].className = '';
          }
        }
      }
    }
  </script>
</head>

<body>
  <nav id="navfloor">
    <ul id="list">
      <li class="cur" data-n="bilibili">bilibili</li>
      <li data-n="优酷视频">优酷视频</li>
      <li data-n="腾讯视频">腾讯视频</li>
      <li data-n="爱奇艺视频">爱奇艺视频</li>
      <li data-n="抖音短视频">抖音短视频</li>
      <li data-n="皮皮虾社区">皮皮虾社区</li>
    </ul>
  </nav>

  <section style="height: 611px;" class="content" data-n="bilibili">bilibili</section>
  <section style="height: 821px;" class="content" data-n="优酷视频">优酷视频</section>
  <section style="height: 911px;" class="content" data-n="腾讯视频">腾讯视频</section>
  <section style="height: 611px;" class="content" data-n="爱奇艺视频">爱奇艺视频</section>
  <section style="height: 511px;" class="content" data-n="抖音短视频">抖音短视频</section>
  <section style="height: 711px;" class="content" data-n="皮皮虾社区">皮皮虾社区</section>
</body>

</html>

老师，请您运行下我的代码看看。
我的问题：script标签里，注释的功能二可以正常运行，但是功能一却有问题。
问题现象简单描述：点击click后，nav导航栏的各个li的class并没有按照逻辑来，完全是乱的

写回答

1回答