jQueryUI 탭 : div를 표시하거나 숨기려면이 탭이 필요합니다. 왜 그렇게 어려운거야?

Question

jQueryUI를 좋아하지만 탭 위젯이 너무 복잡해 보입니다 (jQueryUI 버전 1.10.3).

가 나는 즉석에서 내용을로드 할 수 있습니다 알고이 모두 훌륭하지만 더 많거나 적은이 같은 형태와 일부 DataTables와 여기에 매우 간단한 구조를 가지고 : 그러나

<div id="MyContent"> 
    <ul> 
    <li><a href="#Form">Main Data</a></li> 
    <li><a href="#SubTable1">Additional data 1</a></li> 
    <li><a href="#SubTable2">Additional data 2</a></li> 
    </ul> 
    <div id="Form"> 
    <form>...</form> 
    </div> 
    <div id="SubTable1"> 
    DataTables 1 goes here 
    </div> 
    <div id="SubTable2"> 
    DataTables 2 goes here 
    </div> 
</div> 

, jQueryUI 탭을 적용하면 문제가 심각하게 깨진다. 내가 이미 알고있는 한 가지 이유는 내 코드에 <base> 태그를 사용했기 때문입니다. 탭을 이미 숨기거나 표시하지 않고 즉시 내 콘텐츠를로드하려고한다고 생각합니다. 그러나이 문제를 해결하기 위해 해킹을 사용하더라도 DataTables는 올바르게 렌더링되지 않습니다.

솔직히 말해서, 나는 그것을 고치려고 고심하고 싶지 않습니다.

대신 JqueryUI 탭의 모든 기능을 "끄고"각 div 안에있는 것을 사용하여 탭을 숨기고 표시하는 방법이 있는지 알고 싶습니다. 가능한가?

그건 내 문제를 해결할 것입니다. 수동으로 버튼을 만들고/display: block의 클릭 이벤트를 내 div에 연결하면 DataTables를 포함하여 매력적으로 작동합니다.

사실, jQueryUI 탭을 완전히 덤프하고이를 수행하는 데 필요한 코드를 만드는 것을 고려하고 있지만 가능한 경우 jQueryUI 탭을 사용하는 것을 선호합니다.

미리 감사드립니다.

Answer 1

나는 이것이 약간 허풍 친다는 것을 인정할 것이다 - 그러나 그것은 예로서 작용한다.

HTML :

<div id="MyContent"> 
    <ul> 
    <li><a href="#Form">Main Data</a></li> 
    <li><a href="#SubTable1">Additional data 1</a></li> 
    <li><a href="#SubTable2">Additional data 2</a></li> 
    </ul> 
    <div id="Form" class="tab active"> 
    <form>My Form</form> 
    </div> 
    <div id="SubTable1" class="tab"> 
    DataTables 1 goes here 
    </div> 
    <div id="SubTable2" class="tab"> 
    DataTables 2 goes here 
    </div> 
</div> 

CSS :

.tab{display:none} 
.active{display:block} 

jQuery를 :

$('#MyContent a').on('click',function(e){ 
    var id = $(this).attr('href') 
    $('div.active').toggleClass('active'); 
    $(id).toggleClass('active', ($(this).attr('class') != 'active')); 
    console.log() 
}) 

근무 jsFiddle