how to pass this element to javascript onclick function and add a class to that clicked element(如何将此元素传递给javascript onclick函数并向该单击的元素添加一个类)

本文介绍了如何将此元素传递给javascript onclick函数并向该单击的元素添加一个类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个html导航代码如下

I had an html navigation code as below

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>

当用户点击任何标签时

  • 所有剩余的选项卡都应处于非活动状态，
  • 并且当前元素/选项卡应该处于活动状态，

我上面的代码不起作用.

My code above is not working.

  1. 如何让上面的代码工作?
  2. 我只想为此使用javascript onclick.当用户点击选项卡时，有没有办法发送 this(current) 对象?
  1. How to make the above code work?
  2. I only want to use javascript onclick for this. Is there any way that the this(current) object is send when the user clicks on the tab?

推荐答案

使用这个html获取点击的元素:

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>

脚本:

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

这篇关于如何将此元素传递给javascript onclick函数并向该单击的元素添加一个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！