làm thế nào để vượt qua yếu tố này đến chức năng onclick javascript và thêm một lớp học để mà yếu tố nhấp

Question

Tôi có một mã chuyển hướng html như sau

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

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

như vậy từ các mã trên những gì tôi đang cố gắng làm 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 sẽ không hoạt động và yếu tố/tab hiện tại phải hoạt động, nhưng mã trên không hoạt động, vì vậy bất kỳ ai cũng có thể cho tôi biết, cách làm cho mã trên hoạt động, cũng có anyway mà chúng tôi có thể gửi các đối tượng this (hiện tại) khi người dùng nhấp vào tab, bởi vì tôi muốn sử dụng chỉ javascript onclick cho điều này?

Answer 1

Sử dụng html này để có được những yếu tố 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> 

Script: -

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

Answer 2

Hãy thử như

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

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

Answer 3

Bạn bỏ lỡ một dấu chấm:

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

Answer 4

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

Answer 5

Bạn có hai vấn đề trong mã của bạn .. Trước tiên, bạn cần tham khảo để nắm bắt eleme nt 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. Ngoài ra, lớp hoạt động cũng cho phần tử li ban đầu trong khi bạn đang cố gắng thêm nó vào phần tử "a" trong hàm. thử này ..

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

Answer 6

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

Answer 7

Bạn có thể sử dụng để vượt qua addEventListenerthis đế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') ; 
      }