Question

我在对话框中有一个jQuery选项卡小部件。在this Fiddle中第一次单击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>

Answer 1

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

因此，即使点击次数，标签也会被隐藏，只有奇数次点击它们才会可见。不应该隐藏标签开头，因为它们包含在设置为隐藏的对话框中。

附加说明：

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

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

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

简化代码演示，删除标签隐藏/显示：http://jsfiddle.net/8UBQF/2/

Answer 2

简单的解决方法是调用

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

而不是

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

.show()只是使元素可见，无论其当前状态如何，而.toggle()切换它。

在这种特殊情况下，我不知道为什么你最初甚至需要隐藏#tabs。它们在对话框内部，不会被看到。如果您最初没有.hide()，则以后不需要致电.show()。请参阅jsFiddle修订版：http://jsfiddle.net/8UBQF/1/

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

2 个答案: