巧用aria-current屬性,動態調整導航鏈接樣式
在網頁開發中,動態更新元素樣式是常見需求,例如根據用戶當前位置高亮顯示導航菜單。本文介紹如何利用aria-current=”page”屬性,無需JavaScript,僅用css就能優雅地為活動導航鏈接添加font-medium樣式。
問題:
假設我們有一個導航欄html片段:
<div class="nav" id="nav"> <a class="group relative px-4" href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712">home<https:><a class="group relative px-4" href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pricing">pricing<https:><a class="group relative px-4" href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712story">our story<https:><a aria-current="page" class="group relative px-4" href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712blog">blog<https:><https:><https:><p>aria-current="page"<https:>屬性標識當前激活的鏈接,但其位置會根據用戶訪問頁面而變化。我們需要一種方法動態地為擁有該屬性的<a><https:>標簽添加font-medium<https:>樣式。<https:><p><strong>解決方案:<https:><https:><p>CSS<a style="color:#f60; text-decoration:underline;" title="屬性選擇器" href="https://www.php.cn/zt/70573.html" target="_blank">屬性選擇器</a>提供了解決方案。我們可以利用[aria-current="page"]<https:>選擇器直接選中帶有aria-current="page"<https:>屬性的<a><https:>標簽,并設置其樣式。<https:><p>以下CSS代碼即可實現:<https:><pre class="brush:php;toolbar:false">[aria-current="page"] { font-weight: 600; https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712* 或添加類名:class="font-medium" *https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712 }<https:><p>這段代碼會使所有帶有aria-current="page"<https:>屬性的元素字體加粗(font-weight: 600<https:>相當于中等粗細)。 你也可以選擇添加font-medium<https:>類名,然后在你的樣式表中定義.font-medium { font-weight: 600; }<https:>。 選擇哪種方式取決于你的項目CSS結構和命名規范。直接設置樣式更簡潔,而使用類名則更易于管理和復用。<https:><p>通過這種方法,我們無需JavaScript代碼,就能根據aria-current="page"<https:>屬性動態地為導航鏈接添加樣式,簡潔高效地利用了HTML和CSS的特性。<https:></https:></https:></p></https:></https:></https:></https:></https:></p></https:>
在網頁開發中,動態更新元素樣式是常見需求,例如根據用戶當前位置高亮顯示導航菜單。本文介紹如何利用aria-current=”page”
問題:
假設我們有一個導航欄html片段:
<div class="nav" id="nav"> <a class="group relative px-4" href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712">home<https:><a class="group relative px-4" href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pricing">pricing<https:><a class="group relative px-4" href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712story">our story<https:><a aria-current="page" class="group relative px-4" href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712blog">blog<https:><https:><https:><p>aria-current="page"<https:>屬性標識當前激活的鏈接,但其位置會根據用戶訪問頁面而變化。我們需要一種方法動態地為擁有該屬性的<a><https:>標簽添加font-medium<https:>樣式。<https:><p><strong>解決方案:<https:><https:><p>CSS<a style="color:#f60; text-decoration:underline;" title="屬性選擇器" href="https://www.php.cn/zt/70573.html" target="_blank">屬性選擇器</a>提供了解決方案。我們可以利用[aria-current="page"]<https:>選擇器直接選中帶有aria-current="page"<https:>屬性的<a><https:>標簽,并設置其樣式。<https:><p>以下CSS代碼即可實現:<https:><pre class="brush:php;toolbar:false">[aria-current="page"] { font-weight: 600; https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712* 或添加類名:class="font-medium" *https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712 }<https:><p>這段代碼會使所有帶有aria-current="page"<https:>屬性的元素字體加粗(font-weight: 600<https:>相當于中等粗細)。 你也可以選擇添加font-medium<https:>類名,然后在你的樣式表中定義.font-medium { font-weight: 600; }<https:>。 選擇哪種方式取決于你的項目CSS結構和命名規范。直接設置樣式更簡潔,而使用類名則更易于管理和復用。<https:><p>通過這種方法,我們無需JavaScript代碼,就能根據aria-current="page"<https:>屬性動態地為導航鏈接添加樣式,簡潔高效地利用了HTML和CSS的特性。<https:></https:></https:></p></https:></https:></https:></https:></https:></p></https:>
? 版權聲明
文章版權歸作者所有,未經允許請勿轉載。
THE END