如何使用 JQuery 在不移动页面的情况下将 div 的整个视图替换为另一个 div

Posted 2023-05-08

【中文标题】如何使用 JQuery 在不移动页面的情况下将 div 的整个视图替换为另一个 div

【英文标题】：How to replace Entire full view of div with another div without page movement using JQuery

【发布时间】：2013-12-06 23:34:14

【问题描述】：

大家好，我在用另一个 div 完全替换一个 div 的内容时遇到了一个问题。下面是我的 div 结构

 <div class="tab-pane active" id="events">

    <div class="events-info" style="display:none;">

         <div class="tab-info">

            <div class="bat-chat"><a href="javascript:OpenGallery();" class="btn btn-warning">Bat &amp; Chat Gallery</a></div>

         </div>

    </div>

    <div class="bat-chat-gal" style="position:relative;">

如果您在上面看到有两个 div 类名称为 events-info 和 bat-chat-gal。现在我要做的是，当您单击events-info 类中名为Bat & Chat gallery 的按钮时，我在名为OpenGallery() 的javascript 函数下方调用，其代码如下。在OpenGallery 函数中，我正在淡出events-info 类并淡入bat-chat-gal 在同一个地方。这是我在尝试淡入第二个 div 时遇到的问题，它首先从第一个 div 的末尾开始，然后它会出现所以它看起来像页面移动。如何在不使用某些动画的情况下进行替换。

function OpenGallery()

    $('.events-info').fadeOut();
    $('.bat-chat-gal').fadeIn(3000);

【参考方案1】：

你需要编写如下函数

function OpenGallery()
 
    $('.events-info').fadeOut(function()
        $('.bat-chat-gal').fadeIn();
    );

 

【参考方案2】：

当不想要动画时，只需使用 show 和 hide

 $('.events-info').hide();
 $('.bat-chat-gal').show(3000);

【讨论】：

这里我清楚地提到了它不是动画问题的问题。当我尝试淡入或显示第二个 div 时，它首先从第一个 div 内容的末尾开始，然后它正在替换。那是不好的权利