Javascript Scrollspy活动类用错误的导航链接突出显示_Javascript_Html_Css_Sharepoint 2013_Scrollspy

Javascript Scrollspy活动类用错误的导航链接突出显示

javascript html css sharepoint-2013

Javascript Scrollspy活动类用错误的导航链接突出显示,javascript,html,css,sharepoint-2013,scrollspy,Javascript,Html,Css,Sharepoint 2013,Scrollspy,我对前端开发非常陌生。已应用Scrollspy，如引导中所述。然而，它并没有按预期工作。我有6个粘性righgt导航，它在最后一个a标签上始终处于活动状态。即使我单击了标记中的任何一个，活动类也不会切换请参阅以下代码：- <body onhashchange="if (typeof(_spBodyOnHashChange) != 'undefined') _spBodyOnHashChange();" data-offset="50" data-

我对前端开发非常陌生。已应用Scrollspy，如引导中所述。然而，它并没有按预期工作。我有6个粘性righgt导航，它在最后一个a标签上始终处于活动状态。即使我单击了标记中的任何一个，活动类也不会切换

请参阅以下代码：-

<body onhashchange="if (typeof(_spBodyOnHashChange) != 'undefined') _spBodyOnHashChange();" data-offset="50" data-target="#nav-scroll" data-spy="scroll" class="position-relative ms-backgroundImage" id="content"><span id="DeltaSPWebPartManager">
            

<div class="right-nav d-none d-sm-block">
        <nav class="" id="nav-scroll">
            <ul class="nav" data-spy="affix" data-offset-top="205">
                <li class=" nav-item test1" style="background-color: rgb(246, 246, 246); border-color: rgb(211, 211, 211);">
                    <a href="#nav-home" class="nav-link" id="rightnavhome" title="Home" style="background-color: rgb(6, 103, 58);">
                        <div class="fa fa-home" style="color: rgb(6, 103, 58);"></div>
                    </a>
                </li>
                <li class="nav-item test2">
                    <a href="#frequently-used-head" class="nav-link" id="rightnavFrequently" title="Frequently Used" style="background-color: rgb(6, 103, 58);">
                        <div class="fa fa-question-circle-o" style="color: rgb(6, 103, 58);"></div>
                    </a>
                </li>
                <li class="nav-item test3">
                    <a href="#whatsnew-bg" class="nav-link" id="rightnavwhatsnew" title="Whats New" style="background-color: rgb(6, 103, 58);">
                        <div class="fa fa-gear" style="color: rgb(6, 103, 58);"></div>
                    </a>
                </li>
                <li class="nav-item test4">
                    <a href="#initiatives" class="nav-link" id="rightnavinitiative" title="Initiative" style="background-color: rgb(6, 103, 58);">
                        <div class="fa fa-star-o" style="color: rgb(6, 103, 58);"></div>
                    </a>
                </li>
                <li class="nav-item test5">
                    <a href="#top-highlight-head" class="nav-link" id="rightnavtophigh" title="Top Highlights" style="background-color: rgb(6, 103, 58);">
                        <div class="fa fa-volume-up" style="color: rgb(6, 103, 58);"></div>
                    </a>
                </li>
                <li class="nav-item test6">
                    <a href="#get-in-tuch-sec" class="nav-link active" id="rightnavgetintouch" title="Get In Touch" style="background-color: rgb(6, 103, 58);">
                        <div class="fa fa-phone" style="color: rgb(6, 103, 58);">
                        </div>
                    </a>
                </li>
                
                <li class="nav-item test7">
                    <a href="#" class="nav-link" id="ahrefHappinessMeterWidgetLink" title="Rate your Experience" style="background-color: rgb(6, 103, 58);">
                        <div class="fa fa-smile-o" style="color: rgb(6, 103, 58);"></div>
                            <script id="happiness-meter-widget-web-script" async="" src="https://happinessmeter.gov.ae/webwidget/web.js" data-container-id="" data-language="en" data-key="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NTZ9.uI2T8P3Pam4h3IAR2m_uF50aH5F10Iw-dHbLciteZMk" data-on-finish="" data-entity-sequence-id="371" data-customer-id="0" data-email="" data-phone="" data-transaction-id="0" data-emirates-id="0" data-version="latest" data-delay="0" data-mode="click" data-mode-click-id="ahrefHappinessMeterWidgetLink" data-css-url="https://happinessmeter.gov.ae/webwidget/web.css">
                            </script>
                        
                    </a>
                </li> 
            </ul>
        </nav>
    </div>