I am currently utilizing jQuery to work with 4 anchor tags inside an unordered list, and I would like to be able to determine the "current active link" when a user performs a search. This way, I can execute my query based on the selected anchor tag. How can I achieve this? Here is the code snippet:
<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>
Here is the code I have tried:
$(document).on("keyup", "#search_param", function () {
var interest = $('ul#categorisbtn').find('li.activelink').data('interest');
alert(interest);
});