0

我有这个代码：

<!DOCTYPE html>
<body>
    <div id=div1 style="display:block;">
        <p id="intro">Hello World!</p>
        <p>This example demonstrates the <b>getElementById</b> method!</p>
    </div>
    <div id=div2 style="display:none;">
        <p id="intro">Hello World again!</p>
        <p>This example demonstrates the <b>getElementById</b> method!</p>
    </div>
    <button type="button" onclick="func()">Change div</button>
    <script>
        function func() {
            x = document.getElementById("div1");
            x.style.display = "none";
            x1 = document.getElementById("div2");
            x1.style.display = "block";
        }
    </script>
</body>

它基本上在按钮单击时显示 div2 。

当 div2 和 div1 在同一个文件中时，这可以正常工作。我希望 div2 位于不同的文件中，并在我们单击按钮而不更改 url时显示。

实现此目的的一种方法是使用 iframe 并在单击按钮时更改 iframe 的 url（其中 div2 在那里）。

有没有其他方法可以实现这一目标？

我对 html 和 javascript 很陌生，所以对答案的解释会有很大帮助。谢谢！

4

2 回答 2

2

对于您希望在页面上动态发生而不加载整个页面的这些类型的事情，您需要使用 AJAX。

下面的这段代码可以帮助你理解一些通过 jQuery 使用 AJAX 的非常基本的技术：

$(document).ready(function(){
    $("button").click(function(){
        alert('Load was performed.');
        $.get('target_file.html', function(data) {
            $('div').html(data);
            alert('Load was performed.');
        });
    });
});

更具体地说，您可以<div>像这样从目标文件中找到它：

$("div").html(data.find("#div_id"));

还有一件事。如果你想使用 PHP，你可以在这里看到这篇文章：

php: 使用 cURL 获取 html 源代码

于 2013-06-18T14:17:25.113 回答
0

如果您不想使用 iframe，则需要使用 AJAX 来执行此操作。见http://en.wikipedia.org/wiki/Ajax_(programming)

于 2013-06-18T14:13:47.767 回答