如何将这个元素传递给JavaScript的onclick函数，并添加一个类到单击的元素
我有一个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 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> 所以从上面的代码我想要做的是，当用户点击任何选项卡上的所有其余选项卡应该是无效的，当前的当前元素/选项卡应该是活动的，但上面的代码不工作，所以任何人都可以请让我知道，如何使上面的代码工作，也有无论如何，我们可以发送this （当前）对象，当用户点击选项卡，因为我只想使用JavaScript的onclick这个？
使用这个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') ; }
您可以使用addEventListener将其传递给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') ; }
尝试像
<script> function Data(string) { $('.filter').removeClass('active'); $(this).parent('.filter').addClass('active') ; } </script>
对于您需要使用的类select器. 之前的类名 。而你需要添加父类的类。 因为你是点击锚标签而不是filter 。
你错过了一个小点：
<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>
<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>
你的代码中有两个问题。首先，你需要引用来捕获点击元素。 尝试添加另一个参数到你的函数来引用这个。 当你试图将它添加到函数中的“a”元素时，最初也是li元素的活动类。 尝试这个..
<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>
<!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>
