Menu active

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<ul class="menu-sample">
  <li class="menu-item-sample active"><a href="http://google.com">link 1 here</a></li>
  <li class="menu-item-sample"><a href="http://google.com">link 2 here</a></li>
  <li class="menu-item-sample"><a href="http://google.com">link 3 here</a></li>
  <li class="menu-item-sample"><a href="http://google.com">link 4 here</a></li>
  <li class="menu-item-sample"><a href="http://google.com">link 5 here</a></li>
</ul>

CSS

.menu-sample {
  list-style: none;
  padding: 5px;
}

.menu-item-sample:hover {
  background-color: red;
}

.menu-item-sample.active {
  background-color: blue;
}

JavaScript

$('.app-menu__item').on('click', function() {
  $(this).siblings().removeClass('active');
  $(this).addClass('active');
});