我的代码里有导航栏。 它位于名为nav.ejs的ejs文件中

<nav class="navbar navbar-expand-sm bg-dark navbar-dark mr-auto" >
    
    <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav   ">
            <li class="nav-item">
                <a class="nav-link  " href="#">link1</a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="#">link2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">link3</a>
            </li>

        </ul>
    </div>
</nav>

每次我在导航栏中点击一个项目，它就会变成活动的。我将这行代码放置到每个页面。 以便通过单击导航栏中的链接使其变为活动状态。

window.onload = function() {
    document.getElementById('about').classList.add('active');
}

window.onload = function() {
    document.getElementById('write').classList.add('active');
}

window.onload = function() {
    document.getElementById('home').classList.add('active');
};

我希望将这行代码移动到sample.js文件中。 在这个例子中，在一个文件中，我有这段代码。 通过单击每个链接，只执行中的最后一行:

document.getElementById('home').classList.add('active');

我尝试使用jQuery编写它:

$(window).on("load", function() {
   
    $('.nav-link ').click(function() {
        // event.preventDefault();
   
       $(this).addClass('active').siblings().removeClass('active');
         document.getElementById('about').classList.add('active');

      
    })
});

但不管用。