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

Question

我正在教自己如何制作网站，目前遇到以下问题： 我有一个包含所有页面中都包含的导航栏的外部文件。我希望它在所有页面上都具有固定的位置，但在索引上我希望它在滚动时保持粘性（在它上面有一个标题）。我做了两个css类，它们可以按我的要求工作，但是我不知道如何在一个页面上给一个类，在另一个页面上给一个类。救命？ （我猜可能是javascript，但是如何？）。谢谢！

Answer 1

首先，如果您没有其他特定的方法来检测自己所在的页面，则可以获取如下所示的当前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');
}

这是一个简化的版本，可能您需要根据实际情况进行一些添加或更改，但是它应该使您了解如何实现此目的。