在多页应用中持久化导航栏选中状态：基于文件名匹配的JavaScript实现

<div id="nav-placeholder">
    <nav>
        <ul>
            <li class="nav_link underline"><a href='page1.html'>页面 1</a></li>
            <li class="nav_link underline"><a href='page2.html'>页面 2</a></li>
            <!-- 可以根据需要添加更多导航项 -->
        </ul>
    </nav>
</div>

// 确保在DOM完全加载后再执行脚本
$(document).ready(function() {
    // 1. 获取当前页面的文件名
    // location.pathname 可能返回 "/path/to/page1.html"
    // lastIndexOf("/") + 1 找到最后一个斜杠后的位置
    // substr() 提取文件名
    var currentFilename = location.pathname.substr(location.pathname.lastIndexOf("/") + 1);
    console.log("当前页面文件名:", currentFilename);

    // 2. 选择所有带有 'underline' 类的导航项
    // 假设 'underline' 类标记了需要移动的元素
    var navigationItems = document.querySelectorAll(".underline");

    // 3. 遍历导航项，匹配并应用样式
    for (var i = 0; i < navigationItems.length; i++) {
        // 获取当前导航项中<a>标签的href属性
        var linkElement = navigationItems[i].querySelector('a');
        if (linkElement) {
            var linkHref = linkElement.getAttribute('href');
            console.log("导航链接的href:", linkHref);

            // 如果当前页面文件名与导航链接的href匹配
            if (currentFilename === linkHref) {
                console.log("匹配成功！应用高亮到:", linkHref);
                // 应用CSS transform来移动下划线
                // 这里的 'i * 70' 假设每个导航项的高度为70px，
                // 并且下划线需要垂直移动以对齐对应的导航项。
                // 具体的数值应根据实际CSS布局调整。
                navigationItems[i].style.transform = 'translate3d(0, ' + i * 70 + 'px, 0)';

                // 也可以添加一个 'active' 类来更灵活地控制样式
                // navigationItems[i].classList.add('active'); 
                // 或者 linkElement.classList.add('active-link');
            }
        }
    }            
});