如何aria-current="page"僅將屬性添加到當前選定的元素，即單擊的活動類，并將其從非當前頁面中洗掉？
前任。
$('.nav__link').attr('aria-current', 'page');
$('.nav__link').removeAttr('aria-current');
document.addEventListener('DOMContentLoaded', function() {
const selector = '.nav__link';
const elems = Array.from( document.querySelectorAll( selector ) );
const navigation = document.querySelector( 'nav' );
function makeActive( evt ) {
const target = evt.target;
if ( !target || !target.matches( selector ) ) {
return;
}
elems.forEach( elem => elem.classList.remove( 'active' ) );
evt.target.classList.add( 'active' );
};
navigation.addEventListener( 'mousedown', makeActive );
} );* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*::before, *::after {
box-sizing: border-box;
}
.container {
width: 100%;
max-width: 1024px;
display: block;
margin: 30px auto;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.nav {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.nav__item {
padding: 1rem;
}
.nav__link {
display: block;
padding: .3125rem 1.5rem;
text-transform: uppercase;
}
.nav__link.active {
border: 1px solid #ff4b4c;
color: #ff4b4c;
}<div class="container">
<nav>
<ul class="nav">
<li class="nav__item"><a class="nav__link active" href="#" aria-current="page">Current Page</a></li>
<li class="nav__item"><a class="nav__link" href="#">Page 1</a></li>
<li class="nav__item"><a class="nav__link" href="#">Page 2</a></li>
<li class="nav__item"><a class="nav__link" href="#">Page 3</a></li>
</ul>
</nav>
</div>來源：突出顯示當前頁面活動選單項
uj5u.com熱心網友回復：
這兩行代碼：
elems.forEach( elem => elem.classList.remove( 'active' ) );
evt.target.classList.add( 'active' );
應該是這樣的變化：
elems.forEach( elem => {
elem.classList.remove('active');
elem.removeAttribute('aria-current')
});
evt.target.classList.add('active');
evt.target.setAttribute('aria-current', 'page');
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/530745.html
上一篇：聯系表格輸入影片錯誤
下一篇：如何對齊兩個相鄰的div？