I'm trying to remove and set an active class for a list item every time it's clicked. It's currently removing the selected active class but isn't setting it. Any idea what I'm missing?
HTML
<ul class="nav nav-list">
<li class='nav-header'>Test</li>
<li class="active"><a href="page1.php">Page 1</a></li>
<li><a href="page2.php">Page 2</a></li>
<li><a href="page3.php">Page 3</li>
</ul>
jquery:
$('.nav-list').click(function() {
//console.log("Clicked");
$('.nav-list li.active').removeClass('active');
$(this).addClass('active');
});
This question is related to
javascript
jquery
html
Try this,
$('.nav-list li').click(function() {
$('.nav-list li.active').removeClass('active');
$(this).addClass('active');
});
In your context $(this) will points to the UL element not the Li. Hence you are not getting the expected results.
$(document).ready(function(){_x000D_
$('.cliked').click(function() {_x000D_
$(".cliked").removeClass("liactive");_x000D_
$(this).addClass("liactive");_x000D_
});_x000D_
});.liactive {_x000D_
background: orange;_x000D_
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<ul_x000D_
className="sidebar-nav position-fixed "_x000D_
style="height:450px;overflow:scroll"_x000D_
>_x000D_
<li>_x000D_
<a className="cliked liactive" href="#">_x000D_
check Kyc Status_x000D_
</a>_x000D_
</li>_x000D_
<li>_x000D_
<a className="cliked" href="#">_x000D_
My Investments_x000D_
</a>_x000D_
</li>_x000D_
<li>_x000D_
<a className="cliked" href="#">_x000D_
My SIP_x000D_
</a>_x000D_
</li>_x000D_
<li>_x000D_
<a className="cliked" href="#">_x000D_
My Tax Savers Fund_x000D_
</a>_x000D_
</li>_x000D_
<li>_x000D_
<a className="cliked" href="#">_x000D_
Transaction History_x000D_
</a>_x000D_
</li>_x000D_
<li>_x000D_
<a className="cliked" href="#">_x000D_
Invest Now_x000D_
</a>_x000D_
</li>_x000D_
<li>_x000D_
<a className="cliked" href="#">_x000D_
My Profile_x000D_
</a>_x000D_
</li>_x000D_
<li>_x000D_
<a className="cliked" href="#">_x000D_
FAQ`s_x000D_
</a>_x000D_
</li>_x000D_
<li>_x000D_
<a className="cliked" href="#">_x000D_
Suggestion Portfolio_x000D_
</a>_x000D_
</li>_x000D_
<li>_x000D_
<a className="cliked" href="#">_x000D_
Bluk Lumpsum / Bulk SIP_x000D_
</a>_x000D_
</li>_x000D_
</ul>;you can use siblings and removeClass method
$('.nav-link li').click(function() {
$(this).addClass('active').siblings().removeClass('active');
});
I used this:
$('.nav-list li.active').removeClass('active');
$(this).parent().addClass('active');
Since the active class is in the <li> element and what is clicked is the <a> element, the first line removes .active from all <li> and the second one (again, $(this) represents <a> which is the clicked element) adds .active to the direct parent, which is <li>.
Source: Stackoverflow.com