对话框中的jQuery选项卡小部件：显示错误

我在对话框中有一个jQuery选项卡小部件。在中首次单击Advisers图像时，对话框和选项卡小部件显示良好。但是，如果关闭对话框并再次单击图像，则对话框将呈现，但选项卡小部件不会呈现

我认为这与选项卡小部件上使用的

toggle（）

方法有关，但如果我删除该方法，选项卡小部件将永远不会显示。这几乎就像我需要在对话框关闭时“重新初始化”页面状态，以便在第二次和随后单击Adviser图像时显示选项卡对话框（请原谅我在这里使用UI术语，我是一名服务器端编码器）

谁能给我一个指针吗

HTML

<a href="#" id="advisers-image">
    <div class="circle hovershadow advisers advisers-box-shadow text">Professional
        advisers</div>
</a>

<a href="#" id="industry-image">
    <div class="circle hovershadow industry industry-box-shadow">Industry</div>
</a>

<div style="clear: both;"></div>

<div id="advisers-dialog" class="dialog">

    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Law firms</a></li>
            <li><a href="#tabs-2">Accounting and audit firms</a></li>
            <li><a href="#tabs-3">Management consultants and economists</a></li>
        </ul>
        <div id="tabs-1">
            <p>Law firm text goes here.</p>
        </div>
        <div id="tabs-2">
            <p>Accounting and audit firm text goes here.</p>
        </div>
        <div id="tabs-3">
            <p>Management consultants and economists text goes here.</p>
        </div>
    </div>
</div>


<div id="industry-dialog" class="dialog" title="Industry">Industry
    text goes here</div>

这里是律师事务所的文本

会计和审计事务所的文本在这里

管理顾问和经济学家的文章在这里

工业
这里有文字

Javascript

<script type="text/javascript">
$( "#tabs" ).tabs().hide();
</script>

<script type="text/javascript">         
$( "#industry-dialog" ).dialog({ autoOpen: false });
$( "#industry-image" ).click(function() {
$( "#industry-dialog" ).dialog( "option", "modal", true );
$( "#industry-dialog" ).dialog( "option", "height", "auto" );
$( "#industry-dialog" ).dialog( "option", "width", 700 );
$( "#industry-dialog" ).dialog( "open" );
});
</script>

<script type="text/javascript">         
$( "#advisers-dialog" ).dialog({ autoOpen: false });
$( "#advisers-image" ).click(function() {
$( "#advisers-dialog" ).dialog( "option", "modal", true );
$( "#advisers-dialog" ).dialog( "option", "height", "auto" );
$( "#advisers-dialog" ).dialog( "option", "width", 700 );
$( "#advisers-dialog" ).dialog( "open" );
$( "#tabs" ).tabs( "option", "heightStyle", "content" );
$( "#tabs" ).tabs( 'select', 0 );
$( "#tabs" ).toggle();
});
</script>

$（“#制表符”）.tabs（）.hide（）；
$（“#行业对话框”）.dialog（{autoOpen:false}）；
$（“#行业形象”）。单击（功能（）{
$（“#行业对话框”）。对话框（“选项”、“模态”，真）；
$（“#行业对话框”）。对话框（“选项”、“高度”、“自动”）；
美元（“#行业对话框”）。对话框（“选项”，“宽度”，700）；
美元（“#行业对话框”）。对话框（“打开”）；
});
$（“#顾问对话框”）.dialog（{autoOpen:false}）；
$（“#顾问图像”）。单击（函数（）{
$（“#顾问对话框”）。对话框（“选项”、“模态”，真）；
$（“顾问对话框”）。对话框（“选项”、“高度”、“自动”）；
$（“顾问对话框”）。对话框（“选项”，“宽度”，700）；
$（“顾问对话框”）。对话框（“打开”）；
$（“选项卡”）。选项卡（“选项”、“高度样式”、“内容”）；
$（“#制表符”）.tabs（'select'，0）；
$（“#制表符”）.toggle（）；
});

简单的解决方法是调用

$( "#tabs" ).show();

而不是

$( "#tabs" ).toggle();

.show（）

只会使元素可见，而不管其当前状态如何，而

.toggle（）

会对其进行切换

---

在这种情况下，我不知道为什么一开始就需要隐藏

#选项卡。它们在对话框中，不会被看到。如果最初不调用
.hide（）
它们，以后就不需要调用
.show（）
。请参阅JSFIDLE revision:
基本原因是每次单击调用的图像时，
$（“#选项卡”）.toggle（）

因此，在偶数次点击时，标签将隐藏，在奇数次点击时，标签将可见。一开始不需要隐藏选项卡，因为它们包含在设置为隐藏的对话框中

补充说明：

由于两个对话框的选项都是重复的，因此无需在每次打开时对其进行设置。可以合并到原始选项对象中，为两个对话框共享一个对象，并减少大量代码

var commonDialogOptions={
    autoOpen: false,
    modal:true,
    width:700
}
$("#industry-dialog, #advisers-dialog").dialog(commonDialogOptions);

这将删除单击处理程序中的选项设置。如果需要单独设置特定选项，可以根据需要进行设置

减少代码演示，删除选项卡隐藏/显示：
谢谢charlietfl-由于commonDialogOptions输入，我对您的答案投了赞成票，这是一个非常好的主意。Tcovo是第一个回答的人，所以我接受了他/她的回答。再次感谢您抽出时间。