How to dynamically add styles to navigation links using aria-current attribute?

Use aria-current attribute to dynamically adjust the navigation link style

In web development, dynamic update of element styles is a common requirement, such as highlighting the navigation menu based on the user's current location. This article introduces how to use aria-current="page"<https:>属性，无需JavaScript，仅用CSS就能优雅地为活动导航链接添加<code>font-medium<https:>样式。<https:></https:></https:> question: Suppose we have a navigation bar HTML snippet:

<div class="nav" id="nav">
  <a class="group relative px-4" href="https://www.php.cn/link/58936a175470c7915a764a2e98ebacf3">home<https:>
  </https:></a><a class="group relative px-4" href="https://www.php.cn/link/58936a175470c7915a764a2e98ebacf3pricing">Pricing<https:>
  </https:></a><a class="group relative px-4" href="https://www.php.cn/link/58936a175470c7915a764a2e98ebacf3story">Our story<https:>
  </https:></a><a aria-current="page" class="group relative px-4" href="https://www.php.cn/link/58936a175470c7915a764a2e98ebacf3blog">blog<https:>
<https:><https:>
</https:></https:></https:></a><code>aria-current="page"<https:>属性标识当前激活的链接，但其位置会根据用户访问页面而变化。我们需要一种方法动态地为拥有该属性的<code><a><https:>标签添加<code>font-medium<https:>样式。<https:></https:></https:></code></https:></a></code></https:></code> <strong>Solution: <https:><https:>
</https:></https:></strong>The CSS property selector provides a solution. We can use <code>[aria-current="page"]<https:>选择器直接选中带有<code>aria-current="page"<https:>属性的<code><a><https:>标签，并设置其样式。<https:></https:></https:></a></code></https:></code></https:></code> The following CSS code can be implemented:<https:>
<pre class="brush:php;toolbar:false">[aria-current="page"] {
  font-weight: 600; https://www.php.cn/link/58936a175470c7915a764a2e98ebacf3* or add class name: class="font-medium" *https://www.php.cn/link/58936a175470c7915a764a2e98ebacf3
}<https:>
<p>This code will make all with <code>aria-current="page"<https:>属性的元素字体加粗（ <code>font-weight: 600<https:>相当于中等粗细）。 你也可以选择添加<code>font-medium<https:>类名，然后在你的样式表中定义<code>.font-medium { font-weight: 600; }<https:> 。 选择哪种方式取决于你的项目CSS结构和命名规范。直接设置样式更简洁，而使用类名则更易于管理和复用。<https:></https:></https:></code></https:></code></https:></code></https:></code> In this way, we can use <code>aria-current="page"<https:>属性动态地为导航链接添加样式，简洁高效地利用了HTML和CSS的特性。<https:></https:></https:></code> without JavaScript code to follow <code>aria-current="page"<https:>属性动态地为导航链接添加样式，简洁高效地利用了HTML和CSS的特性。<https:></https:></https:></code></p></https:>

The above is the detailed content of How to dynamically add styles to navigation links using aria-current attribute?. For more information, please follow other related articles on the PHP Chinese website!