Jquery tabs href and ID

I've created a simple tab navigation using css and javascript. It's working fine altough there is one thing I'd like to clarify.

Each list item (tabs) has an attribute of “href” that matches the开发者_StackOverflow社区 ID of the “tab content” div. Then I use jQuery pull off the actions.

Now my question: In order to get the ID I use $(this).find('a').attr('href') then a simple show() to display the appropriate content div. If I use $(this).attr('href') to get ID the show() function won't work.

http://jsfiddle.net/eh4eB/

What is the the difference between $(this).find('a').attr('href') AND $(this).attr('href')

Because your click handler is on the <li>, $(this) is a JQuery wrapper around the <li> element. And of course <li> elements don't have href attributes so there won't be any content in them.

On the other hand, $(this).find('a') will give you a JQuery object containing all of the <a> elements inside the <li> - and the .attr('href') will return the href attribute from the first of those.

Why aren't you also using jQueryUI's Tabs? That would be so much easier.

Your code would be just this:

<script>
$(function() {
    $( "#admin-nav" ).tabs();
});
</script>

Your click() event is bound to the li elements, so inside the handler this is also the li element. You therefore need to find the child a element before you can determine its href attribute.