jQuery 绑定(bind)事件不会始终使 UI 选项卡中的 CSS 发生变化

Question

当选择 jQuery Tabs 的默认选项卡时，我使用下面的函数来更改页面的一些 CSS/HTML 结构。问题是它不是“动态的”，我的意思是它只触发函数中的 CSS - 两个选择器上的 display:none 和 #wrapper 上的宽度 - 单击另一个选项卡后，然后默认选项卡是点击。并且当单击其他选项卡时，CSS 不会恢复到原始状态。

jsfiddle: http://jsfiddle.net/Yfs2V/33/

如何在页面加载时加载默认选项卡时触发此事件，并在单击其他选项卡时返回 CSS？有没有更好的方法来根据事件选项卡进行标记更改？

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

在 tabshow 上，该函数将首先恢复为原始 CSS，然后检查是否单击索引 0，CSS 将会更改。否则原CSS将不会被改变。