jQuery 바인드 이벤트가 UI 탭에서 일관되게 CSS 변경을하지 않습니다.

Question

jQuery 탭의 기본 탭을 선택할 때 아래 기능을 사용하여 페이지의 CSS/HTML 구조 중 일부를 변경합니다. 문제는 그것이 "동적 인"것이 아니라는 것인데, 그 의미로는 함수에서 CSS가 실행된다는 것입니다. 디스플레이 : 두 개의 선택자에 아무 것도없고 #wrapper의 너비 - 다른 탭을 클릭 한 다음 기본 탭이 클릭 함. 다른 탭을 클릭하면 CSS가 원래 상태로 복원되지 않습니다.

jsfiddle : 기본 탭 페이지로드로드 다른 탭을 클릭 할 때 또한 CSS를 반환 할 때http://jsfiddle.net/Yfs2V/33/

가 어떻게이 불을 만들 수 있습니까? 활성 탭에 의해 결정된 마크 업 변경을 수행하는 더 좋은 방법이 있습니까?

$(document).ready(function() { 
    var $tabs= $("#tabs").tabs(); 

$('#tabs').bind('tabsshow', function(event, ui) { 
     switch (ui.index){ 
     case 0: 
      $('#col2, #footer').css('display', 'none'); 
      $('#wrapper').css('width', '700px'); 
    break; 
     } 
    }); 

Answer 1

원본 CSS로 되돌리려면 말하십시오. 이 함수는 제 다시 원래 CSS 돌아 간다 tabshow에서

$(document).ready(function() { 
    var $tabs = $("#tabs").tabs(); 

    $('#tabs').bind('tabsshow', function(event, ui) { 
     //your original css goes here such as $('#wrapper').css('width', '500px'); 
     If(ui.index == 0) { 
      $('#col2, #footer').css('display', 'none'); 
      $('#wrapper').css('width', '700px'); 
     } 
    }); 

는 인덱스 0이 클릭되면, CSS 변경 확인한다. 그렇지 않으면 원본 CSS가 변경되지 않습니다.