cách chuyển phần tử này vào hàm onclick của javascript và thêm một lớp vào phần tử được nhấp đó

Tôi đã có một mã điều hướng html như bên dưới

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>

vì vậy từ đoạn mã trên, những gì tôi đang cố gắng thực hiện là, khi người dùng nhấp vào bất kỳ tab nào trong số các tab còn lại, tất cả các tab còn lại sẽ không hoạt động và phần tử / tab hiện tại phải hoạt động, nhưng đoạn mã trên không hoạt động, vì vậy bất cứ ai có thể vui lòng cho tôi biết, làm thế nào để làm cho đoạn mã trên hoạt động, dù sao thì ở đó chúng tôi có thể gửi thisđối tượng (hiện tại) khi người dùng nhấp vào tab, vì tôi muốn chỉ sử dụng javascript onclick cho việc này?

Sử dụng html này để lấy phần tử được nhấp:

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

Kịch bản:

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

Bạn có thể sử dụng addEventListenerđể chuyển thisđến một hàm JavaScript.

HTML

<button id="button">Year</button>

JavaScript

(function () {
    var btn = document.getElementById('button');
    btn.addEventListener('click', function () {
        Date('#year');
    }, false);
})();

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

<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(this)">This Month</a></li>
        <li class="filter"><a href="#year" onclick="Data(this)">Year</a></li>
        <li class="filter"><a href="#last60" onclick="Data(this)">60 Days</a></li>
        <li class="filter"><a href="#last90" onclick="Data(this)">90 Days</a></li>
    </ul>

</div>

<script>
    function Data(element)
    {     
       element.removeClass('active');
       element.addClass('active') ;
    }
</script>

Bạn có hai vấn đề trong mã của mình .. Trước tiên, bạn cần tham chiếu để nắm bắt phần tử khi nhấp chuột. Hãy thử thêm một tham số khác vào hàm của bạn để tham chiếu điều này. Ngoài ra, lớp hoạt động dành cho phần tử li ban đầu khi bạn đang cố gắng thêm nó vào phần tử "a" trong hàm. thử đi..

<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,element)
    { 
      //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');

      $(element).parent().addClass('active') ;

    } 
</script>

Hãy thử like

<script>
function Data(string)
{      
  $('.filter').removeClass('active');
  $(this).parent('.filter').addClass('active') ;
} 
</script>

Đối với bộ chọn lớp, bạn cần sử dụng .trước tên lớp . Và bạn cần thêm lớp cho cha mẹ . Trở thành bạn đang nhấp vào thẻ neo không phải là filter.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 
<script type="text/javascript" src="jquery-2.1.0.js"></script> 
<script type="text/javascript" >
function openOnImageClick(event)
{
//alert("Jai Sh Raam");
// document.getElementById("images").src = "fruits.jpg";
var target = event.target || event.srcElement; // IE

console.log(target);
console.log(target.src);
 var img = document.createElement('img');
 img.setAttribute('src', target.src);
  img.setAttribute('width', '200');
   img.setAttribute('height', '150');
  document.getElementById("images").appendChild(img);


}


</script>
</head>
<body>

<h1>Screen Shot View</h1>
<p>Click the Tiger to display the Image</p>

<div id="images" >
</div>

<img src="tiger.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick(event)" />
<img src="sabaLogo1.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick(event)" />

</body>
</html>