CodePen Embed - querySelectorAll

<ul>
  <li class="active"><a href="javascript:;">메뉴1</a></li>
  <li><a href="javascript:;">메뉴2</a></li>
  <li><a href="javascript:;">메뉴3</a></li>
  <li><a href="javascript:;">메뉴4</a></li>
  <li><a href="javascript:;">메뉴5</a></li>
</ul>

ul{
  display:flex;
  width: 400px;
}
li{
  width: 20%;
  text-align:center;
  padding: 10px 0;
  background: #ccc;
  border-right: 1px solid #ddd;
}
li:last-child{
  border-right: 0px;
}
li.active{
  background:gold;
}
a{
  display:block;
  text-decoration:none;
  color: #000;
}

var itemList = document.querySelectorAll('li');


for(let i =0; i < itemList.length; i++){
  itemList[i].addEventListener('click',function(){
      for(let j =0; j < itemList.length; j++){
          itemList[j].classList.remove('active');
        }
        itemList[i].classList.add('active');
    });
}

This Pen is owned by gahyun on CodePen.

See more by @gahyun on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.