javascript - 在一页wordpress上保持活动的css菜单

Question

我想在一页 wordpress 网站的相关部分保持菜单状态处于活动状态。目前我有这个代码并使用活动但不保留：

.navbar-nav > li.chisiamo a:hover{ color:#80b087!important; font-weight:light!important;}
.navbar-nav > li.atta a:hover{ color:#b07988!important; font-weight:light!important;}
.navbar-nav > li.worklnk a:hover{ color:#13806e!important; font-weight:light!important;}
.navbar-nav > li.networklnk a:hover{ color:#8b566d!important; font-weight:light!important;}
.navbar-nav > li.contti a:hover{ color:#41473e!important; font-weight:light!important;}
.navbar-nav > li a:active{  font-weight:bold!important;}

这是标题：

<header>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                                                <a class="navbar-brand" href="http://ergoncom.com/it/">
                            <img src="http://ergoncom.com/wp-content/uploads/2017/03/logo.png" alt=""/>
                    </a>
                </div>
                                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                                            <li class="chisiamo">
                        <a href="http://ergoncom.com/it/#about_us">CHI SIAMO</a>
                    </li>
                                            <li class="atta">
                        <a href="http://ergoncom.com/it/#activity">ATTIVITÀ</a>
                    </li>
                                            <li class="worklnk">
                        <a href="http://ergoncom.com/it/#works">WORKS</a>
                    </li>
                                            <li class="networklnk">
                        <a href="http://ergoncom.com/it/#network">NETWORK</a>
                    </li>
                                            <li class="contti">
                        <a href="#contactus">CONTATTI</a>
                    </li>
                                        <li class="lstlnk">
<aside id="secondary" class="widget-area" role="complementary">
<style type="text/css">
.qtranxs_widget ul { margin: 0; }
.qtranxs_widget ul li
 {
display: inline; /* horizontal list, use "list-item" or other appropriate value for vertical list */
list-style-type: none; /* use "initial" or other to enable bullets */
margin: 0 5px 0 0; /* adjust spacing between items */
opacity: 0.5;
-o-transition: 1s ease opacity;
-moz-transition: 1s ease opacity;
-webkit-transition: 1s ease opacity;
transition: 1s ease opacity;
}
.qtranxs_widget ul li.active { opacity: 0.8; }
.qtranxs_widget ul li:hover { opacity: 1; }
.qtranxs_widget img { box-shadow: none; vertical-align: middle;
display: initial; }
.qtranxs_flag { height:12px; width:18px; display:block; }
.qtranxs_flag_and_text { padding-left:20px; }
.qtranxs_flag span { display:none; }
</style>
<section id="qtranslate-2" class="widget qtranxs_widget">
<ul class="language-chooser language-chooser-custom qtranxs_language_chooser" id="qtranslate-2-chooser">
<li class="language-chooser-item language-chooser-item-it active"><a href="http://ergoncom.com/it/" title="Italiano (it)">it </a></li>
<li class="language-chooser-item language-chooser-item-en"><a href="http://ergoncom.com/en/" title="English (en)">en </a></li>
</ul><div class="qtranxs_widget_end"></div>
</section></aside><!-- #secondary -->
</li>
</ul>
            </div>                    
        </nav>
    </header>

这是脚本，但不起作用。我丢失了这项工作的原始脚本

$(document).ready(function () { $(document).on("scroll", onScroll);

//smoothscroll
$('a[href^="#"]').on('click', function (e) {
    e.preventDefault();
    $(document).off("scroll");

    $('a').each(function () {
        $(this).removeClass('active');
    })
    $(this).addClass('active');

    var target = this.hash,
        menu = target;
    $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top+2
    }, 500, 'swing', function () {
        window.location.hash = target;
        $(document).on("scroll", onScroll);
    });
}); });
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#Header Menu a').each(function () {
    var currLink = $(this);
    var refElement = $(currLink.attr("href"));
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
        $('#Header Menu ul li a').removeClass("active");
        currLink.addClass("active");
    }
    else{
        currLink.removeClass("active");
    }
}); }