<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');

itemList.forEach(function(item){
  
  item.addEventListener('click',function(){
    itemList.forEach(function(e){
          e.classList.remove('active');
    });
    item.classList.add('active');
  });

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.