html - 滚动页面时导航栏从 anchor 添加删除类

Question

我是新来的，但我不仅在这个网站上搜索了一段时间的解决方案。

好的，问题来了:

我构建了一个包含多个部分的静态页面。每个部分都可以通过导航栏中的 anchor 链接显示，它在页面左侧是静态的。我怎样才能使刚刚显示在屏幕上的部分的链接处于事件状态？

如果这些部分在外部 html 文件中，应该很容易。但在我的案例中，我找不到实现这一目标的方法...

<div id="navbar">
    <ul>
         <li><h5><a href="#1" class="active">SERVICE</a> </br> </br></h5></li>
         <li><h5><a href="#2" class="inactive">LEISTUNGEN</a> </br> </br></h5></li>
         <li><h5><a href="#3" class="inactive">ÜBER UNS</a> </br> </br></h5></li>
         <li><h5><a href="#4" class="inactive">PARTNER</a> </br> </br></h5></li>
         <li><h5><a href="#5" class="inactive">KONTAKT</a> </br></h5></li>
    </ul>

我想到了一个 JavaScript 来更改链接的类 onclick，但我无法让它工作...

请帮帮我，告诉我该怎么做!

最后但同样重要的是，请原谅我糟糕的英语和编码知识；)

---

对于我要创建的页面的进一步解释! 这是我的导航菜单，它的位置固定在左边!

<div id="navbar">
        <ul>
             <li><h5><a href="#1">SERVICE</a> </br> </br></h5></li>
             <li><h5><a href="#2">LEISTUNGEN</a> </br> </br></h5></li>
             <li><h5><a href="#3">ÜBER UNS</a> </br> </br></h5></li>
             <li><h5><a href="#4">PARTNER</a> </br> </br></h5></li>
             <li><h5><a href="#5">KONTAKT</a> </br></h5></li>
        </ul>
</div>

接下来是一个大节，内容是 4 个小节。这些部分如下所示:

<div id="weiss">
<div id="1" class="content section" data-id="1">



            <div class="page page-1">
                    <div class="topic">
                            <img class="mwlogo" src="media/logo.png"/>      
                    </div>

                    <div class="text">
                            <h2>...</h2>
                    </div>

                <div class="vorteile">

                    <div class="first">
                            <ol>
                                <li><p>...</li>
                                <li><p>...</p></li>
                                <li><p>...</p></li>
                                <li><p>...</p></li>
                                <li><p>...</p></li>
                            </ol>
                    </div>

                    <div class="last">
                            <ol>
                                <li><p>...</p></li>
                                <li><p>...</p></li>
                                <li><p>...</p></li>
                                                                <li><p>...</p></li>
                                                                <li><p>...</p></li>
                                <li><p>...</p></li>
                                <li><p>...</p></li>
                            </ol>
                    </div>

                </div>

            </div>


    </div>
<div>

我链接到 index.html 中的 activemenuitem:

<script type="text/javascript" src="functions/js/activemenuitem.js"></script>

看起来像这样:

function checkActiveSection ()
{
    var fromTop = jQuery(window).scrollTop() ;
    jquery('#weiss .section'.each(function() {
        var sectionOffset = jQuery(this).offset() ;
        if ( sectionOffset.top <= fromTop )
        {
            jQuery('#navbar li').removeClass('active') ;
            jQuery('#navbar li[data-id="'+jQuery(this).data('id')+'"]').addClass('active') ;

        }
    }) ;
}

jQuery(window).scroll(checkActiveSection) ;
jQuery(document).ready(checkActiveSection) ;
jQuery('#navbar li a').click(function(e){
    var idSectionGoto = jQuery(this).closest('li').data('id') ;
    $('html, body').stop().animate({
      scrollTop: jQuery('#weiss .section[data-id="'+idSectionGoto+'"]').offset().top
    }, 300,function(){
        checkActiveSection() ;
    });
     e.preventDefault() ;
}) ;

但问题仍然是，我似乎没有办法让它工作!加载站点时会加载脚本，但不会在菜单类中添加或删除任何类。我需要做什么？! 请帮助我!

Answer 1

<script type="text/javascript">
    $(document).ready(function(){
       $(window).scroll(function(e){
var topMargin = jQuery(window).scrollTop() ; 
         if(topMargin  < 100)
         {
                $("#navbar li a").removeClass('active');
            $("#navbar li a.chap1").addClass('active');
         }
         else if(topMargin > 100 && topMargin <200)
         {
              $("#navbar li a").removeClass('active');
                  $("#navbar li a.chap2").addClass('active');
         }   else
         {
                  $("#navbar li a").removeClass('active');
              $("#navbar li a.chap3").addClass('active');
         }  
    });
    });
</script>

<div id="navbar">
    <ul>
         <li><h5><a href="#1" class="chap1 active">SERVICE</a> </br> </br></h5></li>
         <li><h5><a href="#2" class="chap2  inactive">LEISTUNGEN</a> </br> </br></h5></li>
         <li><h5><a href="#3" class="chap3 inactive">ÜBER UNS</a> </br> </br></h5></li>
</ul>
</div>