Question

hi i have an html snippet as below:-

<ul id="userTabs" class="clearfix">

                <li class="selected"><a href="">Profile Home</a></li>

                <li><a href="/test">test</a></li>

                <li><a href="/test2">test2</a></li>

                <li><a href="/test3">test3</a></li>

                <li><a href="/test4">test4</a></li>


    </ul>

my jquery code snippet is-

$("#userTabs li").click(function(e){
  e.preventDefault();
  $("#userTabs li").removeClass('selected');
  $(this).addClass('selected');
  var href = $('li:selected a').attr('href');
  alert(href);

});

now the issue is, i need to get a value o href when i click a link, the above code will replace current selected class to new selected link.But i cant get the selected class href value. what am i missing here?

Answer 1

Try this code please:

$("#userTabs li").click(function(e){
  e.preventDefault();
  $("#userTabs li").removeClass('selected');
  $(this).addClass('selected');
  var href = $(this).children('a').attr('href');
  alert(href);

});