jquery change display mode

Question

id와 class를 가진 div 요소를 포함하는 다음 html 파일이 있습니다. 나는 각 탭에 할당 된 탭과 페이지를 만들었습니다. 문제는 자식 div의 표시를 다른 클래스로 설정하고 클릭 한 탭을 배경으로 변경하도록 각 부모 div를 반복하는 것입니다.

function MakeActiveTab(CurrentPage, CurrentTab) 
    { 
    $('#PageID').children().filter(".pageParagraph").css('display','none'); 
    $('#PageID').children().filter("#" + CurrentPage).css('display', 'block'); 
    $('#Mainmenu').children().filter(".TabClass").css('background', '#fff'); 
    $('#Mainmenu').children().filter("#" + CurrentTab).css('background', '#007700;'); 
    } 

하지만이 작동하지 않습니다

나는 다음과 같은 시도! 어떤 생각이 든다.

<div id='Mainmenu'> 
    <div id='menu1' class='TabClass'> 
    Tab1 
    </div> 
    <div id='menu2' class='TabClass'> 
    Tab2 
    </div> 

    </div> 

<div id='PageID'> 
     <div id='page1' class='pageParagraph'> 
     some content 
     </div> 

     <div id='page2' class='pageParagraph'> 
     some content 
     </div> 
</div> 

페이지와 메뉴를 부모 div에 동적으로 생성하는 javascript 기능을 만들었습니다. 현재 탭을 가져올 수 없다는 것 외에는 문제가 없습니다. 내가 자바 스크립트로 그 일을했을 때, IE8에서는 작동하지 않았지만 작동했다.

Answer 1

HTML :

<div class="page first-page-name"> 
    page 1 
    <div class="tab first-tab-name">tab 1</div> 
    <div class="tab second-tab-name">tab 2</div> 
</div> 
<div class="page second-page-name"> 
    page 2 
    <div class="tab first-tab-name">tab 1</div> 
    <div class="tab second-tab-name">tab 2</div> 
</div> 

JS :

function showTabOnPage(tab, page) { 
    $('.page').hide().siblings(page).show(); 
    $('.tab').hide().siblings(tab).show(); 
} 
showTabOnPage('.first-tab-name', '.second-page-name'); 

체크 아웃 데모 : http://jsfiddle.net/vpetrychuk/3WtyF

페이지의 구조가 동일하지 않은 경우 - 죄송합니다. 그러나 일반적인 생각이 당신에게 분명 바랄 수 있기를 바랍니다.

Answer 2

방법을 발견했습니다. 감사.

refID = document.getElementById('Mainmenu').childNodes; 
      for (i = 0; i < refID.length; i++) 
      { 
       if (refID[i].id == 'TabClass' + objID) 
       { 
        MakeActiveTab("TabClass" + objID, "pageParag" + objID); 

        return 0; 
       } 
      } 

그건 위풍 당당합니다!