如何将此元素传递给javascript onclick函数并向该单击元素添加一个类

Question

我有一个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>

所以从上面的代码我想要做的是,当用户点击任何选项卡时,所有剩余的选项卡应该是不活动的,并且当前当前元素/选项卡应该是活动的,但上面的代码不起作用,所以任何人都可以让我知道,如何使上述代码工作,无论如何我们可以this在用户点击选项卡时发送(当前)对象,因为我只想使用javascript onclick这个？

Answer 1

使用此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');
 }