在 div 中加载 html 然后将其删除答案

【问题标题】：Load html in div and then remove it在 div 中加载 html 然后将其删除
【发布时间】：2012-12-05 17:33:33
【问题描述】：

我是 Javascript 的初学者，我为一个问题苦苦挣扎了一段时间。我想在另一个本地 html 文档中的现有 div 中打开一个新内容。因此，在主要内容中，我有一个简单的项目列表，当我单击一个项目时，我希望它以与我的项目相同的 div '#content' 打开。为此，我使用代码：

$(document).ready(function() {
    $('a.th-link').click(function() {
        var url = $(this).attr('href');
        $('#content').html('<h4>Loading...</h4>').load(url+ '#mynewdiv');
        $.getScript('js/jquery.js'); 
        $.getScript('js/jquery.horizontal.scroll.js'); 
        $.getScript('js/jquery.mousewheel.js'); 
        $(url).remove();
        return false;
    });
 });

问题是当我想回到我的主要div 项目'#content'，鼠标或浏览器上的后退按钮时，我卡在其他div'#mynewdiv'，或者我得到到之前打开的站点。有人可以帮忙看一下代码吗？

我仍在处理这个问题。我找到了一个与我的相似的粗略示例，并且我已经对其进行了改造，可以按我的意愿工作，但仍然不能正常工作。刷新我的问题。

我想在某个 div 中打开一个新的 html 页面，它会工作返回按钮。

我也尝试过 benalman bbq，但我不知道我做错了什么。

这就是我正在做的事情

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>TEST</title>
    <script src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("jquery", "1.4.1");
    </script>
    <script src="jquery.address-1.1.min.js"></script>


    <script type="text/javascript">
    /*<![CDATA[*/
    $("document").ready(function(){

        function loadURL(url) {
            console.log("loadURL: " + url);
            $("#area").load(url);
        }


        // Event handlers
        $.address.externalChange(function(event) {
console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
$("#area").load($('[rel=address:' + event.value + ']').attr('href'));
}).change(function(event) {
console.log("change");
});

        $('a.test').click(function(){
            loadURL($(this).attr('href'));
        });

        });

    /*]]>*/
    </script>

<style type="text/css">
#area {border-style:solid;
border-width:5px;
height:300px;
width:100%;}
</style>

</head>
<body>
<p>Test</p>
    <div id="area">

    <a class='test' href="test1.html" rel="address:/test1">Test 1</a> <br />
    <a class='test' href="test2.html" rel="address:/test2">Test 2</a> <br /> <br /> <br />

</body>
</html>

谢谢你的回答

【问题讨论】：

当您在浏览器中按下返回按钮时，Javascript 更改将丢失

标签： javascript jquery html load webaddress

【解决方案1】：

.load() 获取数据并将其显示在同一站点上。浏览器永远不会改变页面。所以当你点击返回时，浏览器会转到之前打开的站点。

您可以使用jQuery Address 之类的插件来模拟您想要的行为。

【讨论】：