0

我在对话框中有一个 jQuery 选项卡小部件。在此 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>
4

2 回答 2

1

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

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

附加说明：

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

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

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

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

于 2013-03-29T20:51:37.840 回答
0

简单的解决方法是调用

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

代替

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

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

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

于 2013-03-29T20:50:14.580 回答