即使在页面刷新后如何保持基于 jquery 脚本的导航栏状态？

Question

我创建了一个侧面导航栏，并在两个使用 jquery 的 html 页面上使用它。 导航栏中还有一个下划线，根据所选的导航链接移动。 以下是导航栏和 html 页面的代码：

sidenav.html

<script type="text/javascript" src="script.js"></script>
<link href="design.css" rel="stylesheet" type="text/css" />

第 1 页

第2页

page1.html

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<script>
$(function(){
  $("#nav-placeholder").load("sidenav.html");
});
</script>

<div id="nav-placeholder">

</div>

page1!

page2.html

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<script>
$(function(){
  $("#nav-placeholder").load("sidenav.html");
});
</script>

<div id="nav-placeholder">

</div>

page2!

script.js：下划线移动脚本：

function ul(index) {
console.log('click!' + index)

var underlines = document.querySelectorAll(".underline");
for (var i = 0; i < underlines.length; i++) {
    console.log(index*100)
    underlines[i].style.transform = 'translate3d(0, ' + index * 70 + 'px, 0)';
}

}

现在发生的事情是，当使用导航栏切换到导航链接时，下划线应该向下移动。 但问题是，当我从 page1.html 转到 page2.html 时，屏幕刷新和下划线回到原来的位置。

我的问题是，如何在 html 页面之间切换时实现这种下划线移动。

我不确定我的方法是否正确，因为我是 UI 新手。 请提供一些关于如何使用导航栏在页面之间切换并突出显示选定导航的参考。

谢谢你。

Answer 1

您可以在页面加载时更改样式。 您可以获取页面文件名。 我假设您的 sidebar.html 内容。

<div class="container">        
<div id="nav-placeholder">
    <nav>
        <ul>
            <li class="nav_link underline"><a href='page1.html'>Page 1</a></li>
            <li class="nav_link underline"><a href='page2.html'>Page 2</a></li>
        </ul>
    </nav>
</div>  
</div>
<script>       
    $(document).ready(function() {
       // $("#nav-placeholder").load("sidenav.html");
        var filename = location.pathname.substr(location.pathname.lastIndexOf("/")+1);
        console.log(filename);
        
        var underlines = document.querySelectorAll(".underline");
        for (var i = 0; i < underlines.length; i++) {
            console.log(underlines[i].querySelector('a').getAttribute('href'));
            if(filename == underlines[i].querySelector('a').getAttribute('href') ) {
                console.log('Yeah!!!');
                underlines[i].style.transform = 'translate3d(0, ' + i * 70 + 'px, 0)';
            }
        }            
    });
</script>