CODEWITHSUNDEEP
jquerycsstabshref
Greg
Greg

Reputation: 31

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 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')

Upvotes: 1

Views: 1037

Answers (3)

Adrian J. Moreno
Adrian J. Moreno

Reputation: 14859

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>

Upvotes: 2

Chowlett
Chowlett

Reputation: 46667

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.

Upvotes: 0

Gareth
Gareth

Reputation: 138002

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.

Upvotes: 2

Related Questions