I'm having issues removing the active class in a certain div. I use two filters, but somehow if I click on one, the other filter also gets the active class removed. How can I only target and remove the active class of the children of siblings?
Here's my HTML:
<ul class="filter">
<li class="option"> <a class="link active">
<li class="option"> <a class="link">
<li class="option"> <a class="link">
</ul>
<ul class="filter2">
<li class="option"> <a class="link active">
<li class="option"> <a class="link">
<li class="option"> <a class="link">
</ul>
And here's my jQuery code:
$(document).ready(function () {
$('.link').bind('click', function() {
// remove the active class from all elements with active class
$('.active').removeClass('active')
// add active class to clicked element
$(this).addClass('active');
});
});
li
(yes toa
) : MDN li The end tag can be omitted if the list item is immediately followed by another <li> element, or if there is no more content in its parent element..bind()
was deprecated ages ago in favor of.on()