如何利用aria-current属性动态控制网页导航链接的字体样式？

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

网页开发中，根据页面状态动态调整元素样式非常常见。本文将演示如何利用aria-current="page"<https:>属性，为当前激活的导航链接添加<code>font-medium<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;属性清晰地标识了当前激活的链接。 接下来，我们将通过CSS或JavaScript来实现样式的动态添加。&lt;https:&gt;&lt;p&gt;&lt;strong&gt;方法一：纯CSS方案 (推荐)&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;https:&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;[aria-current=&quot;page&quot;] { font-weight: 500; https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712* 等同于font-medium *https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712 }&lt;https:&gt;&lt;p&gt;这段CSS代码会自动作用于带有&lt;code&gt;aria-current=&quot;page&quot;&lt;https:&gt;属性的&lt;code&gt;&lt;a&gt;&lt;https:&gt;标签，无需任何JavaScript代码。&lt;https:&gt;&lt;p&gt;&lt;strong&gt;方法二：JavaScript动态添加类名&lt;https:&gt;&lt;https:&gt;&lt;p&gt;如果你的样式调整逻辑较为复杂，或者需要与其他JavaScript代码交互，则可以使用JavaScript动态添加类名：&lt;https:&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;const currentLink = document.querySelector('[aria-current=&quot;page&quot;]'); if (currentLink) { currentLink.classList.add('font-medium'); }&lt;https:&gt;&lt;p&gt;这段代码首先使用&lt;code&gt;querySelector&lt;https:&gt;选择器找到带有&lt;code&gt;aria-current=&quot;page&quot;&lt;https:&gt;属性的元素，然后使用&lt;code&gt;classList.add()&lt;https:&gt;方法添加&lt;code&gt;font-medium&lt;https:&gt;类名。 记得在你的CSS中定义&lt;code&gt;.font-medium&lt;https:&gt;类样式。&lt;https:&gt;&lt;p&gt;两种方法都能实现目标，选择哪种取决于你的项目需求和复杂度。 对于简单的样式调整，纯CSS方案更简洁易维护；而对于复杂的场景，JavaScript方案则提供了更大的灵活性。&lt;https:&gt;&lt;/https:&gt;&lt;/p&gt; &lt;div class=&quot;aritcle_card&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/ai/947&quot;&gt; &lt;img src=&quot;https://img.php.cn/upload/ai_manual/000/000/000/175680000018617.png&quot; alt=&quot;沉浸式翻译&quot;&gt; &lt;/a&gt; &lt;div class=&quot;aritcle_card_info&quot;&gt; &lt;a href=&quot;/ai/947&quot;&gt;沉浸式翻译&lt;/a&gt; &lt;p&gt;沉浸式翻译：全网口碑炸裂的双语对照网页翻译插件&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;83&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;a href=&quot;/ai/947&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;/https:&gt;&lt;/code&gt;&lt;/p&gt;&lt;/https:&gt;</pre>

登录后复制

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