I am working with jquery, i have 4 anchor tag inside ul li and i want whenever user search something then i want to know "current active link" so i can run my query according to selected "anchor tag",How can i do this ? Here is my code
<ul class="categorisbtn" id="categorisbtn" name="categorisbtn">
<li ><a href="javascript:void(0);" class="nav-link activelink" data-tagc="Company"><img src="images/inner-img/Company-Report.svg" alt="img" class="img-fluid"> Company Report</a></li>
<li ><a href="javascript:void(0);" class="nav-link" data-tagc="StateR"><img src="images/inner-img/State-Report.svg" alt="img" class="img-fluid"> State Report</a></li>
<li ><a href="javascript:void(0);" class="nav-link" data-tagc="BasinR"><img src="images/inner-img/Basin-Report.svg" alt="img" class="img-fluid"> Basin Report</a></li>
<li ><a href="javascript:void(0);" class="nav-link" data-tagc="SectorR"><img src="images/inner-img/Sector-Report.svg" alt="img" class="img-fluid"> Sector Report</a></li>
</ul>
And i tried with following code
$(document).on("keyup", "#search_param", function () {
var interest = $('ul#categorisbtn').find('li.activelink').data('interest');
alert(interest);
});
On the page load, on page head section you can add method to set active link -
<script type="text/javascript">
$(document).ready(function(){
$('ul.categorisbtn li a').click(function(){
// remove all classes
$('li a').removeClass('activelink');
// add class to the selected element
$(this).addClass('activelink');
});
});
</script>
Then, on your search method
$(document).on("keyup", "#search_param", function () {
var interest = $('ul.categorisbtn').find('li>a.activelink').data('tagc');
alert(interest);
});