Javascript 如何获得导航按钮的效果

我写这段代码是为了根据url地址更改我的导航链接颜色（白色为#03c1cb），但它没有正常运行，请帮助我。我想更改该特定url地址处导航链接的颜色 我的html代码是

<a href="#home" id="start1" class="scroll" style="text-decoration:none;position:absolute;
       right:450px;top:37px;font-weight:bold;color:white;font-size:15px;z-index:200;
       transition:0.5s"  onmouseover="big(this)" onmouseout="small(this)">HOME</a>


function big(x) {

    x.style.fontSize = "17px";
    x.style.color = "#03c1cb";
}

function small(x) {
    var y = location.hash;
    if (x.href == y) {
        x.style.fontSize = "17px";
        x.style.color = "#03c1cb";
    } else {
        x.style.color = "white";
        x.style.fontSize = "15px";
    }
}

function isElementInViewport(el) {
    //special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
        el = el[0];
    }
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $j(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $j(window).width() */
    );
}

// url change on clicking
$(document).ready(function() {
    $(".scroll").click(function(e) {
        e.preventDefault();
        var section = this.href,
            sectionClean = section.substring(section.indexOf("#"));

        $("html, body").animate({
            scrollTop: $j(sectionClean).offset().top
        }, 1000, function() {
            window.location.hash = sectionClean;
        });

    });
});
// listen for the scroll event
$(document).on("scroll", function() {
    console.log("onscroll event fired...");
    // check if the anchor elements are visible
    $(".anchor").each(function(idx, el) {
        if (isElementInViewport(el)) {
            // update the URL hash
            if (window.history.pushState) {
                var urlHash = "#" + $j(el).attr("id");
                window.history.pushState(null, null, urlHash);
            }
        }
    });
});

函数大（x）{
x、 style.fontSize=“17px”；
x、 style.color=“#03c1cb”；
}
函数小（x）{
var y=location.hash；
如果（x.href==y）{
x、 style.fontSize=“17px”；
x、 style.color=“#03c1cb”；
}否则{
x、 style.color=“白色”；
x、 style.fontSize=“15px”；
}
}
函数IsElementViewPort（el）{
//为使用jQuery的用户提供特别奖励
if（jQuery的类型==“函数”&&el实例jQuery）{
el=el[0]；
}
var rect=el.getBoundingClientRect（）；
返回(
rect.top>=0&&
rect.left>=0&&
rect.bottom我在跟踪您的代码时遇到问题。您能提供一个更简单的版本来显示问题吗？您在JavaScript控制台中是否遇到任何错误？它是否正在执行任何操作或没有进行任何更改？请尝试在
.ready（function（））中插入
$（document）.on（“scroll”，func..）
该页面基于#url方法。我的问题是，当我将鼠标悬停在ovr导航链接上时，会产生如big（）和small（）所示的效果。但是，假设我单击了一个导航链接。然后将显示#url，它的导航按钮的外观应与onmouseover事件相同。然后，当我单击另一个导航按钮时，它将再次发生效果更改，并且以前的导航按钮处于正常状态。按钮的外观应根据在页面的#url上