Задача такая :
Есть html код
<ul class="sidebar">
<li class="active"><a href="#" id="profile"><h4><img class="icon" src="images/icons/card.png"/>PROFILE</h4>
<p>About Me</p></a></li>
<li><a href="#" id="resume"><h4><img class="icon" src="images/icons/resume.png"/>RESUME</h4>
<p>My Job and Skills</p></a></li>
<li><a href="#" id="folio"><h4><img class="icon" src="images/icons/case.png"/>FOLIO</h4>
<p>My Works</p></a></li>
<li><a href="#" id="contact"><h4><img class="icon" src="images/icons/mail.png"/>CONTACT</h4>
<p>Let's Get In Touch!</p></a></li>
</ul>
Есть JavaScript код
$(document).ready(function(){
$('.four.columns.sidebar li a').click(function() {
$(this).siblings('.four.columns.sidebar li a').removeClass('active');
$(this).addClass('active');
});
});
который при нажатии на определенную ссылку присваивает элементу
li нажатой ссылки класс
active.
Но обнаружилась проблема - при нажатии на другую ссылку ей тоже присваивается класс
active, а у предыдущей ссылки он почему-то не удаляется. Как сделать чтобы он удалялся?