Question

尝试根据页面滚动位置突出显示侧边菜单。好的例子显示为here。

然而，当以不同的方式练习时，无法获得类似的滚动效果。代码为here。

＆＃13;

$('#sn').on('click', function(event) {
    $(this).parent().find('a').removeClass('active');
    $(this).addClass('active');
});

$(window).on('scroll', function() {
    $('.target').each(function() {
        if($(window).scrollTop() >= $(this).position().top) {
            var id = $(this).attr('id');
            $('#sn a').removeClass('active');
            $('#sn a[href=#'+ id +']').addClass('active');
        }
    });
});

＆＃13;

#sn {
    width: 20%;
    position: fixed;
    }
#sn a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
/* Change the link color on hover */
#sn a:hover {
    background-color: #555;
    color: white;
}

#sn .active {
    background-color: #666;
    color: rgb(58, 133, 204);
}
#sn .active:hover {
    background-color: #4f5f;
    color: rgb(235, 157, 13);
}

section {
    height: 100vh;
    overflow: auto;
    background-color: #F7F7F7;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="sn" class="toggle_sn">
  <a href="#abt_sec" class="item active">About</a>
  <a href="#edu_sec" class="item">Education</a>
  <a href="#soc_sec" class="item">Social</a>
</ul>

<section class="target" id="abt_sec">
  ABOUT
</section>

<section class="target" id="edu_sec">
  EDUCATION
</section>

<section class="target" id="soc_sec">
  SOCIAL
</section>

＆＃13;

我做错了什么？如何在网页设计中调试错误？这是jquery版本问题（例如在1.10.1中，我的是3.3.1）？

Answer 1

1）添加class =＆＃34; target＆＃34;到你的部分。像这样：

<section id="abt_sec" class="target">ABOUT</section>
<section id="edu_sec" class="target">EDUCATION</section>
<section id="soc_sec" class="target">SOCIAL</section>

因为jQuery代码选择target类$('.target').each(function()

的元素

2）纠正最后一行语法：

由此：

$('#sn a[href=#'+ id +']').addClass('active');

到此：

$('#sn a[href="#'+ id +'"]').addClass('active');

因为css选择器应使用以下语法：#sn a[href="#abt_sec"]而不是：#sn a[href=#abt_sec]。这不适用于你的情况因为jQuery v3.3.1，如果你将工作实例中的jQuery版本从jsFiddle从1.1改为3.3.1那么一个人不会像你的例子那样使用相同的错误：

未捕获错误：语法错误，无法识别的表达式：#sn a [href =＃abt_sec]

所以你的代码应该是这样的：

$('#sn').on('click', function(event) {
    $(this).parent().find('a').removeClass('active');
    $(this).addClass('active');
});
$(window).on('scroll', function() {
    $('.target').each(function() {
        if($(window).scrollTop() >= $(this).position().top) {
            var id = $(this).attr('id');
            $('#sn a').removeClass('active');
            $('#sn a[href="#'+ id +'"]').addClass('active');
        }
    });
});

要使用它的codepen：Codepen

查找错误：根据页面滚动位置突出显示侧边菜单

1 个答案: