how to pass this element to javascript onclick function and add a class to that clicked element

Question

I had an html navigation code as below

so from the above code what i am trying to do is, when the user clicks on any of the tab all the remaining tabs should be unactive, and the current current element/tab should be active, but the above code is not working, so can anyone please let me know, how to make the above code work, also is there anyway that we can send the this(current) object when the user clicks on the tab, because i want to use only javascript onclick for this ?

Answer 1

Use this html to get the clicked element:

<div class="row" style="padding-left:21px;">
    <ul class="nav nav-tabs" style="padding-left:40px;">
        <li class="active filter"><a href="#month" onclick="Data('month', this)">This Month</a></li>
        <li class="filter"><a href="#year" onclick="Data('year', this)">Year</a></li>
        <li class="filter"><a href="#last60" onclick="Data('last60', this)">60 Days</a></li>
        <li class="filter"><a href="#last90" onclick="Data('last90', this)">90 Days</a></li>
    </ul> 
</div>

Script:

 function Data(string, el)
 {
     $('.filter').removeClass('active');
     $(el).parent().addClass('active');
 }