jquery, tabs, 활성 클래스 활성화

Question

<script type="text/javascript"> 

$(document).ready(function() { 

    //Default Action 
    $(".tab_content").hide(); //Hide all content 
    $("ul.tabs li: #tab2").addClass("active").show(); //Activate first tab 
    $(".tab_content:#tab2").show(); //Show first tab content 
    //On Click Event 
    $("ul.tabs li").click(function() { 
     $("ul.tabs li").removeClass("active"); //Remove any "active" class 
     $(this).addClass("active"); //Add "active" class to selected tab 
     $(".tab_content").hide(); //Hide all tab content 
     var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
     $(activeTab).show(); //Fade in the active content 
     return false; 
    }); 

}); 
</script> 

나는 이것을하려고했습니다. 현재 페이지를 열면 탭의 두 번째 div가 선택되었지만 선이 강조 표시되지 않습니다. 어떤 조언을 많이 주시면 감사하겠습니다. 감사합니다.

Answer 1

먼저 id 속성 (예 : "tab2")이있는 DOM 노드가 2 개 있습니다.이 작업을해서는 안됩니다. ID는 고유해야하기 때문에 모든 브라우저가 두 번째 노드를 찾을 수있는 것은 아닙니다 (개별 노드 인 경우).

$("#tab2").addClass("active").show(); //Activate first tab 
$("#tab2").show(); //Show first tab content 

(jQuery를 실제로 단순히 내가보기 엔 의심 장면 뒤에 document.getElementById을 사용하는 것보다 오히려 id 속성에 대한 모든 단일 노드를 통해 보이는 경우 제외) :이 대신 무슨 일을하는지 본질적임을 확신 .

당신은, 내가

<tag class="tab2"> 
<!-- I don't know which kind of tag #tab2 was supposed to point at --> 

에 마크 업을 변경하여, 대신 클래스를 사용하고 그것을 찾기 위해 약간 다른 선택기를 사용하는 것이 좋습니다 것, 어떤 종류의 클래스 또는 선택 뒤에 노드를 식별하려면 같은

$('ul.tabs .tab2') 

둘째, 당신은 오히려 <a> 태그 자체보다, 그 탭에서 <a> 태그의 속성합니다 (href 속성)을 받고있어 (그래서 $(this).find("a").attr("href")는 01을 반환 $.show에 DOM 노드, 선택기 (String 등) 또는 jQuery 세트가 필요하므로은 아마도 원하는 내용이 아닐 수 있습니다. 그래서 나는이 변경 것 :

var activeTab = $(this).find("a").attr("href"); 
$(activeTab).show(); //Fade in the active content 

같은 뭔가 :

var activeTab = $(this).find("a"); 
$(activeTab).show(); // might want to wrap this with if (activeTab.length > 0) 
         // but I can't remember what happens if you try to .show() 
         // something that isn't there 

하는 활성 탭 <a> 태그를 표시하려는 경우.

http://api.jquery.com/show/
http://css-tricks.com/the-difference-between-id-and-class/