2009-09-16 8 views
2

여기에 문제를 나타내는 전체 예제 스크립트가 있습니다. 내부 탭 회사/부서가 탭 대신 목록으로 나타납니다.중첩 된 jquery 탭을 얻을 수 없습니다.

편집 : 이미 사람들은 내부 탭도 jQuery를 통해 tabified해야하지만

코드 :

<html> 
<head> 
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    //make tabs tabs 
    $('#top-tabs').tabs({selected: 2}); 
}); 
</script> 

</head><body> 

<div id="top-tabs"> 
    <ul> 
      <li><a href="/timeapp/home">Home</a></li> 
      <li><a href="/timeapp/timecard">Timecard</a></li> 
      <li><a href="#tab-selected">Config</a></li> 
    </ul> 

    <div id="tab-selected"> 
    <ul> 
       <li><a href="#inner-tab-selected">Company</a></li> 
       <li><a href="/timeapp/config/department">Department</a></li> 
    </ul> 
    <div id="inner-tab-selected">ok this is a company</div> 

    </div> 
</div> 

</body></html> 

답변

1

jquery forum 및 got the answer에 질문을 올렸습니다.

이유는 모든 내부 탭에서 elem.tabs()을 호출해야한다는 것입니다. 예를 들어 jQuery 선택기를 사용하여 예를 들어 보겠습니다. $('#container ul').tabs()이므로 수정 된 작업 스크립트는 다음과 같습니다.

<html> 
<head> 
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    //make tabs tabs 
    $('#top-tabs').tabs({selected: 2}); 
    $('#low-tabs').tabs({selected: 1}); 
}); 
</script> 

</head><body> 

<div id="top-tabs"> 
    <ul> 
      <li><a href="/timeapp/home">Home</a></li> 
      <li><a href="/timeapp/timecard">Timecard</a></li> 
      <li><a href="#tab-selected">Config</a></li> 
    </ul> 

    <div id="tab-selected"> 
    <div id="low-tabs"> 
    <ul> 
       <li><a href="#inner-tab-selected">Company</a></li> 
       <li><a href="/timeapp/config/department">Department</a></li> 
    </ul> 
    <div id="inner-tab-selected">ok this is a company</div> 
    </div> 
    </div> 
</div> 

</body></html> 
2

이, 전체 파일 인 경우는 그 다음 문제는 "탭을 선택"이 사업부가 탭되어있을 가능성 당신은 그것을 이야기하지입니다. 나는 그것을 테스트하지는 않았지만 다음을 추가했습니다 :

$('#tab-selected').tabs(); 

아마도 트릭을 할 것입니다.

+0

+1 당신은 더 가깝지만 정확하지 않았습니다. –

관련 문제