How to get current active link and anchor tag information ul li jquery-CodePudding

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  id="categorisbtn" name="categorisbtn">
              <li ><a href="javascript:void(0);"  data-tagc="Company"><img src="images/inner-img/Company-Report.svg" alt="img" > Company Report</a></li>
              <li ><a href="javascript:void(0);"  data-tagc="StateR"><img src="images/inner-img/State-Report.svg" alt="img" > State Report</a></li>
              <li ><a href="javascript:void(0);"  data-tagc="BasinR"><img src="images/inner-img/Basin-Report.svg" alt="img" > Basin Report</a></li>
              <li ><a href="javascript:void(0);"  data-tagc="SectorR"><img src="images/inner-img/Sector-Report.svg" alt="img" > 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);
 });

CodePudding user response：

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