how to pass this element to javascript onclick function and add a class to that clicked element
JavascriptJqueryHtmlOnclickJavascript Problem Overview
I had an html navigation code as below
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>
When the user clicks on any of the tabs
- all the remaining tabs should be unactive,
- and the current element/tab should be active,
My code above is not working.
- How to make the above code work?
- I only want to use javascript onclick for this. Is there any way that the
this
(current) object is send when the user clicks on the tab?
Javascript Solutions
Solution 1 - Javascript
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');
}
Solution 2 - Javascript
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
.
Solution 3 - Javascript
<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>
Solution 4 - Javascript
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>
Solution 5 - Javascript
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') ;
}
Solution 6 - Javascript
<!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>