如何利用aria-current属性动态为导航链接添加样式？

巧用aria-current属性，动态调整导航链接样式

在网页开发中，动态更新元素样式是常见需求，例如根据用户当前位置高亮显示导航菜单。本文介绍如何利用aria-current="page"<https:>属性，无需JavaScript，仅用CSS就能优雅地为活动导航链接添加<code>font-medium<https:>样式。<https:><p><strong>问题：<https:><https:><p>假设我们有一个导航栏HTML片段：<https:><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">&lt;div class=&quot;nav&quot; id=&quot;nav&quot;&gt; &lt;a class=&quot;group relative px-4&quot; href=&quot;https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712&quot;&gt;home&lt;https:&gt;&lt;a class=&quot;group relative px-4&quot; href=&quot;https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pricing&quot;&gt;pricing&lt;https:&gt;&lt;a class=&quot;group relative px-4&quot; href=&quot;https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712story&quot;&gt;our story&lt;https:&gt;&lt;a aria-current=&quot;page&quot; class=&quot;group relative px-4&quot; href=&quot;https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712blog&quot;&gt;blog&lt;https:&gt;&lt;https:&gt;&lt;https:&gt;&lt;p&gt;&lt;code&gt;aria-current=&quot;page&quot;&lt;https:&gt;属性标识当前激活的链接，但其位置会根据用户访问页面而变化。我们需要一种方法动态地为拥有该属性的&lt;code&gt;&lt;a&gt;&lt;https:&gt;标签添加&lt;code&gt;font-medium&lt;https:&gt;样式。&lt;https:&gt;&lt;p&gt;&lt;strong&gt;解决方案：&lt;https:&gt;&lt;https:&gt;&lt;p&gt;CSS&lt;a style=&quot;color:#f60; text-decoration:underline;&quot; title=&quot;属性选择器&quot; href=&quot;https://www.php.cn/zt/70573.html&quot; target=&quot;_blank&quot;&gt;属性选择器&lt;/a&gt;提供了解决方案。我们可以利用&lt;code&gt;[aria-current=&quot;page&quot;]&lt;https:&gt;选择器直接选中带有&lt;code&gt;aria-current=&quot;page&quot;&lt;https:&gt;属性的&lt;code&gt;&lt;a&gt;&lt;https:&gt;标签，并设置其样式。&lt;https:&gt;&lt;p&gt;以下CSS代码即可实现：&lt;https:&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;[aria-current=&quot;page&quot;] { font-weight: 600; https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712* 或添加类名：class=&quot;font-medium&quot; *https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712 }&lt;https:&gt;&lt;p&gt;这段代码会使所有带有&lt;code&gt;aria-current=&quot;page&quot;&lt;https:&gt;属性的元素字体加粗（&lt;code&gt;font-weight: 600&lt;https:&gt;相当于中等粗细）。 你也可以选择添加&lt;code&gt;font-medium&lt;https:&gt;类名，然后在你的样式表中定义&lt;code&gt;.font-medium { font-weight: 600; }&lt;https:&gt;。 选择哪种方式取决于你的项目CSS结构和命名规范。直接设置样式更简洁，而使用类名则更易于管理和复用。&lt;https:&gt;&lt;p&gt;通过这种方法，我们无需JavaScript代码，就能根据&lt;code&gt;aria-current=&quot;page&quot;&lt;https:&gt;属性动态地为导航链接添加样式，简洁高效地利用了HTML和CSS的特性。&lt;https:&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/code&gt;&lt;/p&gt; &lt;div class=&quot;aritcle_card&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/ai/1297&quot;&gt; &lt;img src=&quot;https://img.php.cn/upload/ai_manual/000/000/000/175680203824948.png&quot; alt=&quot;西语写作助手&quot;&gt; &lt;/a&gt; &lt;div class=&quot;aritcle_card_info&quot;&gt; &lt;a href=&quot;/ai/1297&quot;&gt;西语写作助手&lt;/a&gt; &lt;p&gt;西语助手旗下的AI智能写作平台，支持西语语法纠错润色、论文批改写作&lt;/p&gt; &lt;div class=&quot;&quot;&gt; &lt;img src=&quot;/static/images/card_xiazai.png&quot; alt=&quot;西语写作助手&quot;&gt; &lt;span&gt;21&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;a href=&quot;/ai/1297&quot; class=&quot;aritcle_card_btn&quot;&gt; &lt;span&gt;查看详情&lt;/span&gt; &lt;img src=&quot;/static/images/cardxiayige-3.png&quot; alt=&quot;西语写作助手&quot;&gt; &lt;/a&gt; &lt;/div&gt; &lt;/https:&gt;&lt;/https:&gt;&lt;/code&gt;&lt;/https:&gt;&lt;/code&gt;&lt;/https:&gt;&lt;/code&gt;&lt;/https:&gt;&lt;/code&gt;&lt;/p&gt;&lt;/https:&gt;</pre>

登录后复制

</div></https:></p></https:></https:></a>