导航栏活动选项卡颜色更改

Question

我的代码无法运行我不知道为什么？

哪位大侠帮帮我

我无法将 class 名称添加到活动导航栏

<nav class="navbar">
    <ul>
        <li class="nav-list"><a href="home.html" class="navlink">Home</a></li>
        <li class="nav-list"><a href="aboutme.html" class="navlink">About me</a></li>
        <li class="nav-list"><a href="work.html" class="navlink">Work</a></li>
        <li class="nav-list"><a href="contact.html" class="navlink">Contact me</a></li>
    </ul>
</nav>

css

.nav-list a.active{
    color:rgb(28, 162, 224);
}

javaScript

const currentlocation = location.href;
const menuitem = document.querySelectorAll('nav-list a');
const menulenght = menuitem.length;

for(let i = 0; i < menulenght; i++){
    if(menuitem[i].href === currentlocation){
        menuitem[i].className =  'active';
    }
}

Answer 1

1) 您必须使用 . 作为 class 选择器：

document.querySelectorAll( '.nav-list a' );

2) 您必须使用 add 方法添加一个新的 class 为：

menuitem[i].classList.add( "active" )

JS

const currentlocation = location.href;
const menuitem = document.querySelectorAll( '.nav-list a' );

for ( let i = 0; i < menuitem.length; i++ ) {
    if ( menuitem[i].href === currentlocation ) {
        menuitem[i].classList.add( "active" )
    }
}

此外，您当前的代码中有一个拼写错误：lenght 而不是 length

导航栏活动选项卡颜色更改

Nav bar Active tab color change

html

javascript

css

navigation