对话框中的 jQuery 选项卡小部件 : display error

Question

我在对话框中有一个 jQuery 选项卡小部件。当顾问图像在 this Fiddle 中第一次被点击时，对话框和选项卡小部件显示正常。但是，如果关闭对话框并再次单击图像，则对话框会呈现但选项卡小部件不会呈现。

我认为它与选项卡小部件上使用的 toggle() 方法有关，但如果我删除该方法，选项卡小部件将永远不会显示。这几乎就像我需要在对话框关闭时“重新初始化”页面状态，以便让选项卡对话框在顾问图像的第二次和随后的点击中呈现(请原谅我在这里使用 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>

Answer 1

基本原因是每次单击图像时都会调用 $( "#tabs").toggle();。

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

补充说明:

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

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

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

减少代码演示，删除选项卡隐藏/显示:http://jsfiddle.net/8UBQF/2/