巧用aria-current属性和CSS,动态调整导航链接样式
网页开发中,根据页面状态动态改变元素样式是常见需求。本文介绍如何利用aria-current="page"
属性,为对应的标签添加
font-medium
样式,实现简洁高效的样式更新。
假设HTML结构如下:
aria-current="page"
属性标识当前激活的导航项。 我们需要根据此属性,动态为对应的标签应用
font-medium
样式。由于aria-current="page"
可能出现在不同的标签上,CSS属性选择器是理想的解决方案。
只需在CSS中添加如下规则:
a[aria-current="page"] { font-weight: medium; /* 等同于font-medium */ }
这段CSS代码会精准选择所有具有aria-current="page"
属性的标签,并设置其
font-weight
为medium
,从而实现font-medium
样式的动态应用。 无需JavaScript代码,CSS本身就能完成此任务,简洁且高效。 样式会随着aria-current="page"
属性的添加或移除自动更新,确保样式始终与页面状态同步。