javascript - 我正在尝试使用 jquery 切换 div，但我用 Div1 替换的 Div2 已经在屏幕上可见。我该如何解决？

Question

我本质上希望在单击按钮之前隐藏“AboutP2”，然后替换“AboutP1”。我知道它缺少一些 jQuery，但我不知道要输入什么。感谢您的帮助!

当我在浏览器中运行它时，AboutP2 已经出现在屏幕上(这很有意义，因为它在代码中)，但我不希望它出现在那里。

HTML:

<div class="AboutP1">
        <div class="TitleAbout">
            <p> Lorem ipsum dolor sit amet, summo moderatius posidonium sea id. Duo sadipscing complectitur ea, et mazim legimus veritus ius, ne vel aliquip vivendo suscipiantur. Diam nostro feugiat ne pri, error sententiae disputationi ex vel. Quis alii audiam cu est. Per choro legere ut, ea clita euripidis efficiendi has. Eam in noluisse mediocrem. </p>
        </div>
            <div>
                <button> > Continue </button>
            </div>
</div>

<div class="AboutP2">
        <div class="MoreAbout">
            <p> Idque hendrerit vim at, accumsan vivendum verterem eu qui. Facer nusquam ne ius, nam eros nobis sadipscing ei. Choro vitae vivendum mel eu. Eius volumus at mea, te per tibique rationibus, tantas delicatissimi pri ad. Eu mel inani ignota assueverit, nec audiam minimum accumsan ne, per cu velit clita utamur.</p>
        </div>
</div>

jQuery:

$(function() {

    $('button').click(function() {
        $('div.AboutP1').replaceWith('AboutP2');

    });

});

Answer 1

您只需要显示和隐藏内容即可。这是使用 jQuery 显示数据的典型方式。您可以在开始时在要隐藏的元素上放置一个类，然后可以进行切换。打开和关闭该类以显示/隐藏它。

$('button').on('click', function(){
  $('.AboutP1').addClass('hidden');
  $('.AboutP2').removeClass('hidden');
})

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="AboutP1">
        <div class="TitleAbout">
            <p> Lorem ipsum dolor sit amet, summo moderatius posidonium sea id. Duo sadipscing complectitur ea, et mazim legimus veritus ius, ne vel aliquip vivendo suscipiantur. Diam nostro feugiat ne pri, error sententiae disputationi ex vel. Quis alii audiam cu est. Per choro legere ut, ea clita euripidis efficiendi has. Eam in noluisse mediocrem. </p>
        </div>
            <div>
                <button> > Continue </button>
            </div>
</div>

<div class="AboutP2 hidden">
        <div class="MoreAbout">
            <p> Idque hendrerit vim at, accumsan vivendum verterem eu qui. Facer nusquam ne ius, nam eros nobis sadipscing ei. Choro vitae vivendum mel eu. Eius volumus at mea, te per tibique rationibus, tantas delicatissimi pri ad. Eu mel inani ignota assueverit, nec audiam minimum accumsan ne, per cu velit clita utamur.</p>
        </div>
</div>