在使用JavaScript在不同页面上时,可以通过以下步骤在单独的header.html中更改活动的导航li:
<script>
function setActiveNav() {
// 获取当前页面的URL
var currentPageUrl = window.location.href;
// 获取导航菜单的所有li元素
var navItems = document.querySelectorAll('.nav li');
// 遍历导航菜单的li元素
for (var i = 0; i < navItems.length; i++) {
var navItem = navItems[i];
// 获取导航菜单项的链接URL
var navItemUrl = navItem.querySelector('a').href;
// 检查当前页面的URL是否与导航菜单项的URL匹配
if (currentPageUrl === navItemUrl) {
// 设置活动导航li的样式
navItem.classList.add('active');
} else {
// 移除非活动导航li的样式
navItem.classList.remove('active');
}
}
}
</script>
<script>
window.addEventListener('DOMContentLoaded', function() {
setActiveNav();
});
</script>
<object>
标签或者服务器端的模板引擎进行引入。<object data="header.html" width="100%" height="50"></object>
<ul class="nav">
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
通过以上步骤,可以在不同的页面上使用JavaScript来更改单独的header.html中的活动导航li。当页面加载时,JavaScript会根据当前页面的URL与导航菜单项的URL进行匹配,然后设置活动导航li的样式。这样可以确保在不同的页面上正确显示活动导航li,提升用户体验。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云