jQuery - Tabs - Need a little help/direction.

Question

Once again, I have a question about jQuery, but I'm doing my best to learn, but sometimes tutorials don't give me everything I need.

I'm trying to make a set of tabs work, however, nothing seems to be working..

Here's the code I'm working with:

HTML:

     <!-- TAB SECTION -->
<div id="tab_container">
     <ul id="tab_list">
        <li><a class="how_on" href="#how">How</a></li>
        <li><a class="why" href="#why">Why</a></li>
        <li><a class="what" href="#what">What</a></li>
        <li><a class="who" href="#who">Who</a></li>
        <li><a class="when" href="#when">When</a></li>
    </ul>
    <img src="images/tab_top.jpg" width="864px" height="6px" alt="" border="0" />
</div>

<!-- HOW -->
<div class="tabs">
    <div class="tab" id="how">
        <p><strong>HOW IT WORKS:</strong></p>
    </div>

<!-- WHY -->
    <div class="tab" id="why">
        <p><strong>WHY:</strong></p>
    </div>
</div>

CSS:

#tab_container
{
    color: #FFFFFF;
    background-color: transparent;
    height: 35px;
    width: 864px;
    margin: 14px 0 0 0;
    display: block;
    float: left;
    overflow: hidden;
}

ul#tab_list
{
    width: 683px;
    height: 29px;
    padding: 0;
    margin: 0;
    display: inline;
    overflow: hidden;
    list-style-type: none;
}

ul#tab_list li
{
    margin: 0;
    padding: 0;
    display: inline;
}

.how,
a.how:link,
a.how:visited,
a.how_on
{
  float: left;
  display: inline;
  width: 135px;
  height: 29px;
  margin: 0;
  text-decoration: none;
  text-indent: -99999px;
  overflow: hidden;  
}

a.how:visited, a.how:link, a.how:hover
{
    background-image: url("../images/how_tab.jpg");
    background-position: 0 -58px;
}

a.how_on
{
    background-image: url("../images/how_tab.jpg");
    background-position: 0 -29px;
}

.tabs
{
    color: #000;
    background-color: #f3f9fb;
    width: 836px;
    margin: 0;
    padding: 0px 14px 6px 14px;
    display: inline;
    overflow: hidden;
    float: left;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 12px;
}

jQUERY:

jQuery(document).ready(function(){
 //if this is not the first tab, hide it
 jQuery(".tab:not(:first)").hide();

 //to fix u know who
 jQuery(".tab:first").show();

 //when we click one of the tabs
 jQuery("#tab_list a").click(function(){
 //get the ID of the element we need to show
 stringref = jQuery(this).attr("href").split('#')[1];
 //hide the tabs that doesn't match the ID
 jQuery('.tab:not(#'+stringref+')').hide();
 //fix
 if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0") {
 jQuery('.tab#' + stringref).show();
 }
 else
 //display our tab fading it in
 jQuery('.tab#' + stringref).fadeIn();
 //stay with me
 return false;
 });

});

Just wanted to say thank you in advance for all the help.

Answer 1

I can see the codes are not fully implemented so I'll just point out one obvious what I assume is a typo.

jQuery(".tab_list a") //now
jQuery("#tab_list a") //should be