Question

有人可以告诉我如何使ajax hide / show toggle脚本在显示另一个元素块的内容之间交替显示。例如，我有这个iframe（隐藏在页面上）：

<iframe class="slidingframe" id="thisframe" name="search" src="content.html"></iframe>

该iframe的隐藏/显示状态由此表单按钮控制：

<form accept-charset="UTF-8" class="fsearch" action="./Affiliates/search_db/search.php" method="get" target="search">
<input type="submit" value="Search" class="send-button" />
<input type="hidden" name="search" value="1" />
<label for="sitesearch">
<input id="sitesearch" class="tfield" type="text" name="query" size="30" />
</label>
</form>

现在我想要的是当我点击按钮时它应该显示我指定的iframe，同时也隐藏了这个：

<div id="my_div">some content here</div>

而且，一旦我在第一个iframe的区域外面或者它之外的任何东西点击，我希望它回到隐藏状态，只留下我指定的第二个div（myDiv），这非常重要，因为所有的内容被加载到这个div中。单击表单按钮时会触发站点搜索并在iframe中加载数据。

Answer 1

你可以这样做

<强> Live Demo

$(document).ready(function() {    
    $('.show_hide').click(function() {
        if ($('#div_one').is(':visible')) {
            $('#div_one').hide(2000);
            $('#div_two').show(2000);
        }
        else {
            $('#div_one').show(2000);
            $('#div_two').hide(2000);
        }    
    });
});

ajax显示/隐藏脚本，在显示两个div之间交替显示

1 个答案: