Comment ajouter dynamiquement des styles aux liens de navigation à l'aide d'attribut Aria-Current?

Utilisez l'attribut Aria-Current pour ajuster dynamiquement le style de liaison de navigation

Dans le développement Web, la mise à jour dynamique des styles d'éléments est une exigence courante, comme la mise en évidence du menu de navigation en fonction de l'emplacement actuel de l'utilisateur. Cet article présente comment utiliser aria-current="page"<https:>属性，无需JavaScript，仅用CSS就能优雅地为活动导航链接添加<code>font-medium<https:>样式。<https:></https:></https:> question: Supposons que nous ayons un extrait HTML de la barre de navigation:

<div class="nav" id="nav">
  <a class="group relative px-4" href="https://www.php.cn/link/58936a175470c7915a764a2e98ebacf3">maison<https:>
  </https:></a><a class="group relative px-4" href="https://www.php.cn/link/58936a175470c7915a764a2e98ebacf3pricing">Prix<https:>
  </https:></a><a class="group relative px-4" href="https://www.php.cn/link/58936a175470c7915a764a2e98ebacf3story">Notre histoire<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>Le sélecteur de propriétés CSS fournit une solution. Nous pouvons utiliser <code>[aria-current="page"]<https:>选择器直接选中带有<code>aria-current="page"<https:>属性的<code><a><https:>标签，并设置其样式。<https:></https:></https:></a></code></https:></code></https:></code> Le code CSS suivant peut être implémenté:<https:>
<pre class="brush:php;toolbar:false">[aria-current = "page"] {
  Police-poids: 600; https://www.php.cn/link/58936a175470c7915a764a2e98ebacf3* or add class name: class="font-medium" *https://www.php.cn/link/58936a175470c7915a764a2e98ebacf3
}<https:>
<p>Ce code fera tout avec <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> De cette façon, nous pouvons utiliser <code>aria-current="page"<https:>属性动态地为导航链接添加样式，简洁高效地利用了HTML和CSS的特性。<https:></https:></https:></code> sans code javascript à suivre <code>aria-current="page"<https:>属性动态地为导航链接添加样式，简洁高效地利用了HTML和CSS的特性。<https:></https:></https:></code></p></https:>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!