2012-12-25 3 views
0

jquery.addres 플러그인을 사용하여 많은 하위 탭이있는 많은 상위 탭을 가지려고하면 첫 번째 탭이 정상적으로 작동하고 모든 하위 탭이 표시되지만 두 번째 탭에는 ' t 작업은 제대로 예제 페이지에서 그들은 많은 하위 탭으로 첫 번째 탭을 보여주고, 간단한 내용 여기jQuery 주소 하위 탭 (중첩 탭)

와 두 번째 탭은 'Jbin here하면 내가 페이지를 재현했던 예를 링크 here

입니다 탭 2에는 자식 탭이 없습니다. 어떻게 작동시킬 수 있습니까?

여기에 두 번째 탭에서 작동하지 않는 HTML이 있습니다. 내 생각에 ID 하위 탭을 두 번 사용해서는 안되며 ID를 클래스로 변경하고 위의 스크립트를 "#" . "난 아직도 쉽게해야합니다 확신, 두 번째 탭에서 하위 탭을 재현 할 수 없습니다"로 "하지만, 난 그냥 결국

<div class="page"> 
<h1>jQuery Address SubTabs</h1> 

<div id="tabs"> 
    <ul> 
    <li><a href="#tab1">Tab 1</a></li> 

    <li><a href="#tab2">Tab 2</a></li> 
    </ul> 

    <div id="tab1"> 
    <p>Tab 1</p> 

    <div id="subtabs"> 
     <ul> 
     <li><a href="#tab1-subtab1">SubTab 1</a></li> 

     <li><a href="#tab1-subtab2">SubTab 2</a></li> 
     </ul> 

     <div id="tab1-subtab1"> 
     <p>SubTab 1</p> 
     </div> 

     <div id="tab1-subtab2"> 
     <p>SubTab 2</p> 
     </div> 
    </div> 
    </div> <!--end subtab1--> 

    <div id="tab2"> 
    <p>Tab 2</p> 

    <div id="subtabs"> 
     <ul> 
     <li><a href="#tab2-subtab1">SubTab 1</a></li> 

     <li><a href="#tab2-subtab2">SubTab 2</a></li> 
     </ul> 

     <div id="tab2-subtab1"> 
     <p>SubTab 1</p> 
     </div> 

     <div id="tab2-subtab2"> 
     <p>SubTab 2</p> 
     </div> 
    </div> <!--end subtab2--> 
    </div> <!--end tab2--> 
</div> <!--end tabs--> 

+0

HTML을 추가 ... HTML에서 Tab2''의 하부 탭이 없습니다. ID는 반드시 중복해서는 안됩니다. 대신 – charlietfl

+0

클래스를 사용하십시오. http://jsbin.com/uvabux/22/edit#/tab2에서 코드를 재생할 수 있습니다. 도움을 주셔서 감사합니다. – Nassim

답변

0

S 해결 방법은 머리에 : 데모 페이지가 다르기에

var tabs, 
       separator = '-', 
       initialTab = 'tab1', 
       navSelector = 'ul.ui-tabs-nav a', 
       tabSelector = '#tabs, #tab1 > #subtabs'; 

var tabs, 
       separator = '-', 
       initialTab = 'tab1', 
       navSelector = 'ul.ui-tabs-nav a', 
       tabSelector = '#tabs, #tab1, #tab2 > #subtabs'; 

모습 ... #의 TAB2에게

+0

감사합니다. 시도 해봐 ? – Nassim