js排它思想(导航栏的切换)

通俗来讲，留下自己干掉它人

<div class="contianer">
    <div id="item" class="active"></div>
    <div id="item"></div>
    <div id="item"></div>
    <div id="item"></div>
</div>

.contianer {
    display: flex;
    height: 20px;
    width: 240px;
    justify-content: space-around;
}

#item {
    width: 50px;
    background-color: aquamarine;
    height: 20px;
}
.active {
    background-color: red !important; /*因为权重的关系使用 !important*/
}

let items = document.querySelectorAll('#item');

for (let i = 0; i < items.length; i++) {

    items[i].onclick = function () {

        for (let j = 0; j < items.length; j++) {
            //全部死掉，主角使用龟息功，进行假死
            items[j].removeAttribute("class");
        }
        //对方全死，主角活过来
        this.setAttribute('class', 'active');
    }
}

1. 当我们点击长方形时，当前的背景颜色发生改变成红色

1. 原先则则变为海蓝色

当然也可以使用css实现：（使用css伪类选择器 :hover）

.contianer {
    display: flex;
    height: 20px;
    width: 240px;
    justify-content: space-around;

}

#item {
    width: 50px;
    background-color: aquamarine;
    height: 20px;
}



#item:hover {
    background-color: red;
}