滚动时切换导航栏li元素的active类实现方案咨询

我明白你的需求——很多示例都是给<a>标签加类，但你想直接操作<li>元素，其实只需要在原逻辑基础上调整选择器，找到<a>对应的父级<li>即可。

先修正你代码里的小笔误（比如outerHeig应该是outerHeight，还有变量声明的语法错误），然后修改核心逻辑来操作<li>：

var sections = $('section'),
    nav = $('nav'),
    nav_height = nav.outerHeight();

$(window).on('scroll', function() {
  var cur_pos = $(this).scrollTop();
  
  sections.each(function() {
    var top = $(this).offset().top - nav_height,
        bottom = top + $(this).outerHeight();
    
    if (cur_pos >= top && cur_pos <= bottom) {
      // 先移除所有导航<li>的类
      nav.find('li').removeClass('active');
      // 找到对应section的导航<a>，再获取它的父级<li>，添加类
      nav.find('a[href="#' + $(this).attr('id') + '"]').parent('li').addClass('active');
    }
  });
});

关键逻辑说明： #

1. 匹配section与导航项：假设你的每个<section>都有唯一id，导航栏里的<a>标签href对应这些id（比如<a href="#home">对应<section id="home">），通过a[href="#' + $(this).attr('id') + '"]就能定位到对应导航链接。
2. 切换
3. 的类：用.parent('li')获取该<a>的父级<li>，然后给它添加目标类（比如active），同时先移除所有<li>的这个类，确保只有当前项高亮。

额外注意： #

• 记得在CSS里定义.active类的样式，比如：

nav li.active {
  background-color: #2c3e50;
  color: #fff;
  /* 其他样式比如内边距、边框等可按需添加 */
}

• 如果你的导航结构嵌套更深（比如<li>里还有其他容器包裹<a>），可以把.parent('li')换成.closest('li')，这样能更稳妥地向上找到最近的<li>元素。

内容的提问来源于stack exchange，提问作者Satrio Obednego