导航栏中的链接在处于活动状态时不会显示为“当前”

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

您可以删除主目录的当前类，并为您单击的选项卡添加类当前。比如当你点击关于 ---＆gt;将类当前添加到该锚标记和主页 ---＆gt;从锚标记中删除类当前。

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