html - 我的导航栏中的链接在它们处于活动状态时未显示为“当前”

Question

对于水平导航栏中的活动/当前链接，我有不同的背景颜色。当一个链接被点击并且该特定页面打开时，它应该显示不同的颜色（如在“主页”链接中）但它没有发生。

请帮忙。我希望我已经清楚地描述了自己。该网站是：http ://www.successrealization.com

我想要的示例：- 在我的另一个站点http://healthsewa.org/my-site/portfolio.html上，它正在以我想要的方式正常发生。我不知道怎么做。代码几乎相同。

Answer 1

我认为您正在寻找的是一种让页面检测它所在的“选项卡”的方法。这实际上不会神奇地发生。您需要以某种方式保存单击的选项卡，以便在回发所选选项卡后将其设置为当前或活动。

如果您只担心现代浏览器，您可以使用 localStorage 来做到这一点。您也可以使用 cookie 来执行此操作。

下面是使用 localStorage 设置变量的示例：

localStorage.setItem('tab', 'set ur tab index etc here');

单击选项卡时，您将执行上述操作。在页面加载时，您会反过来获得标签索引。

localStorage.getItem('tab');

使用 jQuery 或 js 根据您设置/获取的索引设置选项卡处于活动状态。

编辑：设置一个 jsfiddle，如果你愿意，我会完成这个例子。

Answer 2

您可以删除当前的家庭课程并为您单击的选项卡添加当前课程。就像您单击关于--->将当前类添加到该锚标记和主页时--->从锚标记中删除当前类。

您可以使用 addClass 和 removeClass 方法动态添加和删除类。