jQueryバインドイベントがUIタブでCSSを一貫して変更しない

Question

jQueryタブのデフォルトタブが選択されているときに、以下の関数を使用してページのCSS/HTML構造の一部を変更しています。問題はそれが "動的"ではないということです。その意味では、関数内のCSSを起動させるだけです - ディスプレイ：2つのセレクタのnoneと#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に戻す必要があります。

$(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'); 
     } 
    }); 

タブショーでは、最初に元のCSSに戻り、インデックス0をクリックするとCSSが変更されます。さもなければ、元のCSSは変更されません。