时间戳

首页 > 解决方案 > 导航栏在不同页面上的不同行为

javascript - 导航栏在不同页面上的不同行为

问题描述

我正在自学如何制作网站，目前遇到以下问题：我有一个包含导航栏的外部文件，该文件包含在所有页面中。我希望它在所有页面上都有一个固定的位置，除了我希望它在滚动时粘住的索引（我上面有一个标题）。我制作了两个 css 类，它们按照我的意愿工作，但我不知道如何在页面上给它一个类，在其他页面上给它一个类。帮助？（我猜可能是 javascript，但如何？）。谢谢！

标签： javascriptcssnavbar

解决方案

首先，如果您没有其他特定的方法来检测您在哪个页面上，您可以像这样获取当前 URL：

const currentHref = window.location.href;

然后您可以应用类，具体取决于哪个 URL 处于活动状态：

const target = document.getElementById('target-id');

if (currentHref.includes('/page-one')) {
  target.classList.add('class-one');
} else if (currentHref.includes('/page-two')) {
  target.classList.add('class-two');
}

这是一个简化版本，您可能需要针对您的实际案例进行一些添加或更改，但它应该让您了解如何实现这一点。

推荐阅读