wie dieses Element Javascript Onclick Funktion zu übergeben und eine Klasse zu geklickten Element

Question

ich eine HTML-Navigationscode hatte, wie unten

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

so aus dem obigen Code hinzufügen, was ich zu tun ist, ich versuche, wenn die Der Nutzer klickt auf einen beliebigen Tab. Alle verbleibenden Tabs sollten nicht aktiv sein und das aktuelle aktuelle Element/Tab sollte aktiv sein, aber der obige Code funktioniert nicht, also kann mir bitte jemand sagen, wie man den obigen Code funktioniert, gibt es auch noch, dass wir das this (aktuelle) Objekt senden können, wenn der Benutzer auf den Tab klickt, weil ich nur Javascript onclick dafür verwenden möchte?

Answer 1

verwenden html das geklickt Element zu erhalten: -

<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

Versuchen Sie, wie

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

Für die Klassenauswahl Sie . vor dem Klassennamen verwenden müssen .Und Sie benötigen die Klasse für das Eltern hinzuzufügen. Bec Sie klicken auf Anchor-Tag nicht die filter.

Answer 3

Sie verfehlten einen Punkt:

<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

Sie haben zwei Probleme in deinem Code .. Zuerst brauchst du einen Verweis, um das Eleme zu erfassen nt beim Klick. Fügen Sie Ihrer Funktion einen weiteren Parameter hinzu, um dies zu referenzieren. Die aktive Klasse ist auch für das Element li anfangs, während Sie versuchen, es zu einem Element "a" in der Funktion hinzuzufügen. versuchen, dies ..

<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

Sie addEventListener können this an eine JavaScript-Funktion zu übergeben.

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