使导航栏活动链接背景颜色保持突出显示

Posted

技术标签:

【中文标题】使导航栏活动链接背景颜色保持突出显示【英文标题】:Make Navbar Active Link Background Color Remains Highlighted 【发布时间】:2022-01-10 19:18:09 【问题描述】:

我有侧边栏的代码。我希望在单击链接时更改链接的背景(单击 pegawai 或 absen 时,背景颜色会自动更改)。但是使用这样的javascript代码,它总是加载并且背景颜色不能保持焦点。如何为活动栏制作背景颜色?

【问题讨论】:

【参考方案1】:

没那么简单,如果不是初始样式,css就无法保留样式。 您还需要调整 jQuery 代码以检查页面的 url。您可以使用window.location.pathname 并检查当前路径名是否与任何链接匹配并在那里添加 css。

【讨论】:

以上是关于使导航栏活动链接背景颜色保持突出显示的主要内容,如果未能解决你的问题,请参考以下文章

VueJS将活动类添加到侧边栏链接

如何使用 Tailwind 和 Nuxt.js 突出显示导航栏上的活动部分?

FullCalendar - 获取外部链接以突出显示现有事件

Next.js 导航栏:单击来自不同 <nav> 组的链接时突出​​显示不清晰

如何在导航栏上突出显示活动路线?

重新加载页面后如何突出显示导航栏中的活动菜单项