jQuery - Tabs - Besoin d'un peu d'aide/direction

Question

Encore une fois, j'ai une question à propos de jQuery, mais je fais de mon mieux pour apprendre, mais parfois les tutoriels ne me donnent pas tout ce dont j'ai besoin.

Je suis en train de faire un ensemble de travaux d'onglets, rien ne semble toutefois fonctionner ..

Voici le code que je travaille avec:

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; 
}); 

}); 

Je voulais juste vous dire merci à l'avance pour toute l'aide.

Answer 1

Je peux voir que les codes ne sont pas entièrement mis en œuvre, donc je vais juste souligner une évidence ce que je suppose est une faute de frappe.

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