如何传递这个元素到 javascript onclick 函数，并添加一个类到该点击元素

我有一个如下的 html 导航代码

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>

当用户单击任何选项卡时

  • 所有剩余的选项卡都应该是非活动的,
  • 当前的元素/选项卡应该是活动的,

我上面的代码无法工作。

  1. 如何使上述代码工作？
  2. 我只想使用 javascript onclick。当用户单击选项卡时，是否有办法发送 this(当前)对象？
282624 次浏览
小开

Try like

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

For the class selector you need to use . before the classname.And you need to add the class for the parent. Bec you are clicking on anchor tag not the filter.

小开
最佳答案

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>

Script:

 function Data(string, el)
{
$('.filter').removeClass('active');
$(el).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>
小开

You have two issues in your code.. First you need reference to capture the element on click. Try adding another parameter to your function to reference this. Also active class is for li element initially while you are tryin to add it to "a" element in the function. try this..

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

You can use addEventListener to pass this to a JavaScript function.

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

提交答案