active css and jquery

by adisakthimthong

HTML

<div class="box">
  <div id="banks">
    <ul>
      <li class="active">Bank1</li>
      <li>Bank2</li>
    </ul>
  </div>
  <div id="buttons">
    <ul>
      <li class="active">USD</li>
      <li>EURO</li>
    </ul>
  </div>
</div>

CSS

.box li {
  cursor: pointer;
}

#banks .active {
  color: red;
}

#buttons .active {
  color: blue;
}

JavaScript

$('.box li').click(function() {
  $(this).siblings('li').removeClass('active');
  $(this).addClass('active');
});