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

网页开发中，根据页面状态动态改变元素样式是常见需求。本文介绍如何利用aria-current="page"<https:>属性，为对应的<code><a><https:>标签添加<code>font-medium<https:>样式，实现简洁高效的样式更新。<https:><p>假设HTML结构如下：<https:><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;code&gt;aria-current=&quot;page&quot;&lt;https:&gt;可能出现在不同的&lt;code&gt;&lt;a&gt;&lt;https:&gt;标签上，CSS&lt;a style=&quot;color:#f60; text-decoration:underline;&quot; title=&quot;属性选择器&quot; href=&quot;https://m.php.cn/zt/70573.html&quot; target=&quot;_blank&quot;&gt;属性选择器&lt;/a&gt;是理想的解决方案。&lt;https:&gt;&lt;p&gt;只需在CSS中添加如下规则：&lt;https:&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;a[aria-current=&quot;page&quot;] { font-weight: medium; https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712* 等同于font-medium *https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712 }&lt;https:&gt;&lt;p&gt;这段&lt;a style=&quot;color:#f60; text-decoration:underline;&quot; title=&quot;css&quot; href=&quot;https://m.php.cn/zt/15716.html&quot; target=&quot;_blank&quot;&gt;css&lt;/a&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-weight&lt;https:&gt;为&lt;code&gt;medium&lt;https:&gt;，从而实现&lt;code&gt;font-medium&lt;https:&gt;样式的动态应用。 无需javascript代码，css本身就能完成此任务，简洁且高效。 样式会随着&lt;code&gt;aria-current=&quot;page&quot;&lt;https:&gt;属性的添加或移除自动更新，确保样式始终与页面状态同步。&lt;https:&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;/a&gt;&lt;/code&gt;&lt;/https:&gt;&lt;/code&gt;&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow artxards&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; rel=&quot;nofollow&quot; href=&quot;/xiazai/code/12093&quot; title=&quot;CSS婚礼策划服务机构宣传网站模板&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg&quot; alt=&quot;CSS婚礼策划服务机构宣传网站模板&quot; onerror=&quot;this.onerror='';this.src='/static/lhimages/moren/morentu.png'&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a rel=&quot;nofollow&quot; href=&quot;/xiazai/code/12093&quot; title=&quot;CSS婚礼策划服务机构宣传网站模板&quot; class=&quot;overflowclass&quot;&gt;CSS婚礼策划服务机构宣传网站模板&lt;/a&gt; &lt;p class=&quot;overflowclass&quot;&gt;CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。&lt;/p&gt; &lt;/div&gt; &lt;a rel=&quot;nofollow&quot; href=&quot;/xiazai/code/12093&quot; title=&quot;CSS婚礼策划服务机构宣传网站模板&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt;&lt;/https:&gt;</pre></https:></p></https:></https:></a>