用Js写一个导航栏选中样式变化

HTML代码

<nav>
    <a class="nav-link" href="index.php">首页</a>
    <a class="nav-link" href="shop.php">商城</a>
    <a class="nav-link" href="signin.php">登录</a>
    <a class="nav-link" href="signup.php">注册</a>
</nav>

Js代码

// 让页面渲染完成就执行以下代码
window.onload = function navbarActive() {
    // 获取当前页面url
    var href = window.location.href
    // 获取导航栏所有链接数据
    var key = document.getElementsByClassName("nav-link")
    // 遍历进行判断
    for (let i = 0; i <= key.length; i++) {
        if (href.indexOf(key[i].href) < 0) {
        } else {
            key[i].classList.add("active"); // 给匹配当前页面的导航链接添加选中样式
            console.log('当前页面url：'+href)
            console.log('匹配的url：'+key[i].href)
            console.log('有匹配数据！')
            break;
        }
    }
}