如何将div从一页移动到另一页？

Question

我在名为Transactions.html的页面上有以下div：

<div class = "theListItem" data-role="collapsible-set" data-collapsed="false">
    <div data-role="collapsible" data-collapsed="false" data-theme="a">
        <h3>$12.62   -  11/01/2012   -   Kelloggs Diner  -  Brooklyn Ny</h3>
        <div data-role="controlgroup"  data-type="horizontal">
            <a class= "green" href="categorize.html" data-transition="slide" data-role="button">Yes</a>
            <a class="red" href="#" data-role="button">No</a>
            <a class="blue" href="IDK.html" data-transition="slideup" data-role="button">I'm not sure</a>
        </div>
    </div>
</div>

当我单击链接<a>No</a>我希望整个div移至另一个Summary.html页面。 有任何想法吗？ 谢谢

Answer 1

您可以这样进行。 您需要有一个wrapper div标签才能选择整个html内容。

<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        $('.red').click(function(){
            var divData = $('#dataContainer').html();
        window.location.href = "summarypage.html?data="+divData+"";
        });
    });            
</script>

<div id="dataContainer">
    <div class = "theListItem" data-role="collapsible-set" data-collapsed="false">
        <div data-role="collapsible" data-collapsed="false" data-theme="a">
            <h3>$12.62   -  11/01/2012   -   Kelloggs Diner  -  Brooklyn Ny</h3>
            <div data-role="controlgroup"  data-type="horizontal">
                <a class= "green" href="categorize.html" data-transition="slide" data-role="button">Yes</a>
                <a class="red" href="#" data-role="button">No</a>
                <a class="blue" href="IDK.html" data-transition="slideup" data-role="button">I'm not sure</a>
            </div>
        </div>
    </div>
</div>

在摘要页面中，您需要从URL检索数据。 当您运行它并单击“否”链接时，它将导航到摘要页面，您可以在摘要页面URL栏上看到html值。

您可以使用PHP使用<?php echo $_REQUEST['data']; ?>检索此数据<?php echo $_REQUEST['data']; ?> <?php echo $_REQUEST['data']; ?>

Answer 2

您不能-网络不是这样的。 每个HTML页面都是自包含的，并且已封装。

某些网站，例如Github，对JavaScript历史记录API和AJAX都没有什么技巧，以使其看起来好像新页面是“部分加载”的，而实际上却是同一页面。

Answer 3

您可能需要使用PHP或服务器端技术来存储数据，并且需要将静态页面完全转换为动态PHP页面，这需要大量工作。

Answer 4

通过使用html，不可能将数据从一个html文件传输到另一个html文件。 使用JQuery执行数据传输通过在Jquery中使用load（），单击想要显示数据的div或位置上的按钮，可以将另一页中的特定数据加载到页面中