Html 滚动页面时，导航栏从锚点添加移除类_Html_Css_Class_Onclick

Html 滚动页面时，导航栏从锚点添加移除类

html css class

Html 滚动页面时，导航栏从锚点添加移除类,html,css,class,onclick,Html,Css,Class,Onclick,我是新来的，但我已经搜索了一段时间，不仅是在这个网站上好的，问题是：我构建了一个静态页面，包含多个部分。每个部分都可以通过导航栏中的锚点链接显示，该锚点链接在页面左侧是静态的。我如何才能实现屏幕上显示的部分链接处于活动状态如果这些部分位于外部html文件中，那么这应该很容易。但是我找不到一个方法让我的情况发生 <div id="navbar"> <ul> <li><h5><a href="#1" class="

我是新来的，但我已经搜索了一段时间，不仅是在这个网站上

好的，问题是：

我构建了一个静态页面，包含多个部分。每个部分都可以通过导航栏中的锚点链接显示，该锚点链接在页面左侧是静态的。我如何才能实现屏幕上显示的部分链接处于活动状态

如果这些部分位于外部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>

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() ;
}) ;

...

我链接到index.html中的activemenuitem：

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

看起来是这样的：

<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>

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() ;
}) ;

函数checkActiveSection（）
{
var fromTop=jQuery（window.scrollTop（）；
jquery（'#weiss.section'.each（function（））{
var sectionOffset=jQuery（this.offset（）；
如果（sectionOffset.top<代码>
$（文档）.ready（函数（）{
$（窗口）。滚动（功能（e）{
var topMargin=jQuery（window.scrollTop（）；
如果（上边缘<100）
{
$（“#navbar li a”）.removeClass（'active'）；
$（“#navbar li a.chap1”）.addClass（“活动”）；
}
否则，如果（topMargin>100&&topMargin，这里有一个适合您情况的解决方案：

即使没有完全优化，也要简单得多
<div id="navbar">
    <ul>
         <li><h5><a href="#1">SERVICE</a></h5></li>
         <li><h5><a href="#2">LEISTUNGEN</a></h5></li>
         <li><h5><a href="#3">ÜBER UNS</a></h5></li>
         <li><h5><a href="#4">PARTNER</a></h5></li>
         <li><h5><a href="#5">KONTAKT</a></h5></li>
    </ul>
</div>

<div id="sections">

    <div class="section" data-id="1">
        <h2>Services</h2>
        <p></p>
    </div>

    <div class="section" data-id="2">
        <h2>LEISTUNGEN</h2>
        <p></p>
    </div>

    <div class="section" data-id="3">
        <h2>Section 3</h2>
        <p></p>
    </div>

    <div class="section" data-id="4">
        <h2>Section 4</h2>
        <p></p>
    </div>

    <div class="section" data-id="5">
        <h2>Section 5</h2>
        <p></p>
    </div>

</div>

JS
函数checkActiveSection（）
{
var fromTop=jQuery（window.scrollTop（）；
jQuery（'#sections.section'）。每个（函数（）{
var sectionOffset=jQuery（this.offset（）；
如果（sectionOffset.top）您是指这样的内容（滚动时在右侧）：我想您可能想这样做：@Pierre Granger是的，这几乎是正确的方向。Thx，我将尝试完成此操作；）@PierreGranger你能帮我把它整合到我的网站上吗？我需要定制什么？但是需要jQuery，OP可能不想只使用它的一个功能，而且当内容扩展时，这将不再起作用，因为你所做的计算是静态的，而不是集中在动态内容上。我只是回答了这个问题“滚动页面时，导航栏从锚点添加/删除类".好的，首先，感谢你在这方面的进一步帮助！当我看到它时，它应该像一个charme一样工作，但它对我来说根本不适合。如果我理解得完全正确，这是jquery，而不是javascript，这对我来说很好。但是我需要包括jquery库。这样做之后，它就不工作了。我的代码看起来与上面的代码有点不同。但这一切都是正确的只需添加或删除类。将active添加到active部分。这不会发生！我不知道为什么！我将添加一个新的回复以获取进一步的代码！控制台中有错误吗？确保包含js文件？因此，当我使用Firebug添加类“active”时手动，然后脚本在我开始滚动时立即删除该类。因此，srtipt似乎已加载并工作，但不是它应该的方式。错误可能在哪里？
function checkActiveSection()
{
    var fromTop = jQuery(window).scrollTop() ;
    jQuery('#sections .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('#sections .section[data-id="'+idSectionGoto+'"]').offset().top
    }, 300,function(){
        checkActiveSection() ;
    });
     e.preventDefault() ;
}) ;