Question

I want to set the menu to active when click on it. This is what I’ve tried :

<script language="javascript" type="text/javascript">
  var select;
  $(document).ready(function () {
    $.getJSON(url, function (data) {
     $.each(data, function (index, dataOption) {

      var new_li = $("<li class='level1' id='select_list'><a href='javascript:void(0);' id='" + dataOption.ID + "' class ='selectedcategory'>"  + dataOption.Name + "</a>");

      $('a#' + dataOption.ID).click(function () {
        select = "selected";
        $('.level1').attr("id",select);
      });
     });
    });
  });
</script>

What I tried to do is to set the id of ‘level1’ to selected, when I click on that link. But my coding is set all the link to selected, even I click only 1 link.

Could anyone give me the solution please.

Thanks so much.

Answer 1

That happens because you are calling .attr() on all .level1 element instead of only the one being clicked by its child so,

change

$('.level1').attr("id",select);

to

$(this).parent().attr('id', select);

You also need to remove the “selected” id from the other <li>‘s by

$('.level1').removeAttr('id');

So the complete code looks like:

  $('a#' + dataOption.ID).click(function () {
      $('.level1').removeAttr('id');
      $(this).parent().attr("id", 'selected');
  });

One suggestion though, class is usually used in situation like this when you want to have a selected type of a list of menu, if you are using class you’d do something like

$('a#' + dataOption.ID).click(function () {
    $('.level1').removeClass('selected');
    $(this).parent().addClass('selected');
}

Looks more concise that way, but I’ll leave it up to you 🙂