jQuery - 탭 - 약간의 도움/방향이 필요합니다.

Question

jQuery에 대한 질문이 있지만 배우기에는 최선을 다하고 있지만 튜토리얼을 통해 필요한 모든 것을 제공하지 못하는 경우가 있습니다.

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

}); 

그냥 말하고 싶었다는 모든 도움에 미리 감사드립니다.

Answer 1

코드가 완전히 구현되지 않았 음을 알 수 있으므로 오타가 있다고 가정합니다.

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