나는이 같은 형태의 페이지가 어떻게 전체 페이지

Question

에 JQuery와 탭을 폭발 :

 
+-------------------------------------------+ 
|           | 
| +----------------------------+ +--------+ | 
| |main      | |sidebar | | 
| |       | |+------+| | 
| |       | ||jquery|| | 
| |       | || tabs || | 
| |       | |+------+| | 
| |       | |  | | 
| |       | |  | | 
| +----------------------------+ +--------+ | 
+-------------------------------------------+ 

있는 4 개 탭 jQuery를 탭 요소를 가지고 있습니다. 전과 마찬가지로 전체 페이지에서 동시에 4 개의 탭을 모두 볼 수있는 버튼 하나를 갖고 싶습니다. 다음과 같은 내용 :

 
+-------------------------------------------+ 
|           | 
| +------------------+ +------------------+ | 
| | tab 1   | | tab 2   | | 
| |     | |     | | 
| +------------------+ +------------------+ | 
|           | 
| +------------------+ +------------------+ | 
| | tab 3   | | tab 4   | | 
| |     | |     | | 
| +------------------+ +------------------+ | 
|          close | 
+-------------------------------------------+ 

이 작업을 수행하는 방법에 대해 알고 싶습니다.

Answer 1

나는 최근에 비슷한 것을했다. 당신의 탭 DIV 요소가있는 버튼을 호출 코드는 다음 expand에 의해 수행 된 작업을 되돌립니다 collapse 방법을 만들고 닫기 버튼이 호출이이 라인

function expand(){ 
    $('div.tab').each(function(){ 
    $(this).show(); //Make sure all our tabs are visible 
    $(this).removeClass('tab'); //Remove any sizing etc. previously applied to the tab by your stylesheet 
    $(this).addClass('expandedtab'); //Apply class which sets proper size, floats left etc. 
    }); 
} 

함께 일을하고 있다고 가정. expand이 호출되기 전에 (어떤 탭이 활성 상태인지) 호출되기 전에 collapse이 업무 상태에 대해 알 필요가 있다고 판단되면 에 collapse으로이 정보를 저장하는 jQuery.data() 메서드를 사용하십시오.

참고 : 원하는 경우, 대신 '탭'클래스를 제거하고 'expandedtab'클래스를 추가, 당신은 단지 탭 DIV에 스타일 속성을 추가 expand을 특정 스타일을 오버라이드 (override)/적용 할 수 있습니다 및 collapse은 제거했다 속성.