Помогите с jQuery

Есть вот такой код, суть проблемы в том, что есть 3 списка, сами блоки работают

Но когда кликаешь на ссылку в одном блоке, она становится активной, все прописано в css

И на пример кликаешь на ссылку в другом списке, в предыдущем списке ссылка остается активной

Как сделать, чтобы активность ссылки убиралась, даже если я перехожу на другой список?

$(".sub a").click(function(event) {

  event.preventDefault();

  $(this).parent().addClass("active");

  $(this).parent().siblings().removeClass("active");

  var tab = $(this).attr("href");

  $(".box").not(tab).css("display","none");

  $(tab).fadeIn();

});

<ul class="sub">

<li><a href="#item1">item1</a></li>

<li><a href="#item2">item2</a></li>

<li><a href="#item3">item3</a></li>

<li><a href="#item4">item4</a></li>

<li><a href="#item5">item5</a></li>

</ul>

<ul class="sub">

<li><a href="#item1">item1</a></li>

<li><a href="#item2">item2</a></li>

<li><a href="#item3">item3</a></li>

<li><a href="#item4">item4</a></li>

<li><a href="#item5">item5</a></li>

</ul>

<ul class="sub">

<li><a href="#item1">item1</a></li>

<li><a href="#item2">item2</a></li>

<li><a href="#item3">item3</a></li>

<li><a href="#item4">item4</a></li>

<li><a href="#item5">item5</a></li>

</ul>