title: how to pass this element to javascript onclick function and add a class to that clicked element
body: <p>I had an html navigation code as below</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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');
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="row" style="padding-left:21px;"&gt;
    &lt;ul class="nav nav-tabs" style="padding-left:40px;"&gt;
      &lt;li class="active filter"&gt;&lt;a href="#month" onclick="Data('month')"&gt;This Month&lt;/a&gt;&lt;/li&gt;
      &lt;li class="filter"&gt;&lt;a href="#year" onclick="Data('year')"&gt;Year&lt;/a&gt;&lt;/li&gt;
      &lt;li class="filter"&gt;&lt;a href="#last60" onclick="Data('last60')"&gt;60 Days&lt;/a&gt;&lt;/li&gt;
      &lt;li class="filter"&gt;&lt;a href="#last90" onclick="Data('last90')"&gt;90 Days&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>When the user clicks on any of the tabs</p>
  <ul>
  <li>all the remaining tabs should be unactive,</li>
  <li>and the current element/tab should be active,</li>
  </ul>
  <p>My code above is not working.</p>
  <ol>
  <li>How to make the above code work?</li>
  <li>I only want to use javascript onclick for this. Is there any way that the <code>this</code>(current) object is send when the user clicks on the tab?</li>
  </ol>