[解決済み] javascript の onclick 関数にこの要素を渡して、クリックされた要素にクラスを追加するにはどうすればよいでしょうか。

質問

私は以下のようなhtmlナビゲーションコードを持っていた

function Data(string) {
  //1. get some data from server according to month year etc.,
  //2. unactive all the remaining li's and make the current clicked element active by adding "active" class to the element
  $('.filter').removeClass('active');
  $(this).addClass('active');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 Month</a></li>
    <li class="filter"><a href="#year" onclick="Data('year')">Year</a></li>
    <li class="filter"><a href="#last60" onclick="Data('last60')">60 Days</a></li>
    <li class="filter"><a href="#last90" onclick="Data('last90')">90 Days</a></li>
  </ul>
</div>

ユーザーがタブのいずれかをクリックすると

• は、残りのすべてのタブを非アクティブにする必要があります。
• で、現在の要素/タブがアクティブであるべきです。

上記の私のコードは動作しません。

1. 上記のコードを動作させるにはどうすればよいですか？
2. 私はこれのためにjavascriptのonclickを使いたいだけです。何か方法がありますか？ this (現在の)オブジェクトは、ユーザーがタブをクリックしたときに送信されますか？

どのように解決するには？

クリックされた要素を取得するためにこのhtmlを使用します。

<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>

スクリプトです。

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