JQuery Tabs, problem altering selected element

Question

Hi All, I'm using http://jqueryfordesigners.com/jquery-tabs/ for a project, the tabbing code looks like this:-

<script type="text/javascript" charset="utf-8">
$(function () {
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':first').show();

$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();

});
</script>

This works great, but the design requires that I insert the selected class on the li tag, not the a tag. When I alter the script to do this the show/hide for each tab breaks. Any thoughts on what else needs to change? Thanks in advance.

<script type="text/javascript" charset="utf-8">
$(function () {
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':first').show();

$('div.tabs ul.tabNavigation li').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation li').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();

});
</script>

Answer 1

You are accessing this.hash on an <li>, which isn't going to get what you want.

Your function needs to change a little:

$(function () {
  var tabContainers = $('div.tabs > div');
  tabContainers.hide().filter(':first').show();

  // you still want to bind to the "a" element, not the li
  $('div.tabs ul.tabNavigation a').click(function () {
    tabContainers.hide();
    // this.hash is the #whatever portion of the href
    tabContainers.filter(this.hash).show();

    // remove selected class from LI's
    $('div.tabs ul.tabNavigation li').removeClass('selected');

    // look for our closest li parent (jQuery 1.3+) and add the selected class.
    $(this).closest('li').addClass('selected');

    return false;
  }).filter(':first').click();

});

Answer 2

It is a bit difficult to answer your question without more information. The most important missing information is your current HTML and CSS, since now it is only possible to guess why it isn't working.

As mentioned by gnarf, your code should change a little bit to get it working with the example HTML and CSS used by the page you've got this code from:

<script type="text/javascript" charset="utf-8">
$(function () {
        var tabContainers = $('div.tabs > div');
        tabContainers.hide().filter(':first').show();

        $('div.tabs ul.tabNavigation li a').click(function () {
            tabContainers.hide();
            tabContainers.filter(this.hash).show();
            $('div.tabs ul.tabNavigation li').removeClass('selected');
            $(this).closest('li').addClass('selected');
            return false;
        }).filter(':first').click();

    });
</script>

Additionally, your css should change as well, since the selected class is now set on the LI instead of on the A. I wonder why you don't use the tab-plugin provided by JQuery UI. It let you configure a lot of things and hardly requires any code.