使用 jquery 将 HTML 加载到 DIV 中答案

【问题标题】：Load HTML into a DIV using jquery使用 jquery 将 HTML 加载到 DIV 中
【发布时间】：2013-07-10 06:11:05
【问题描述】：

我有一个 index.html，有一个 DIV，我希望通过单击按钮来加载其余的 HTML 文件，这里我有一个示例：
我已经尝试了很多我在谷歌上找到的例子，但没有一个是有效的。这是我使用的最后一个代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"     "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  

<script src="jquery/reflection.js" type="text/javascript" charset="UTF-8"></script>
<script src="jquery/jquery-1.10.1.min.js" type="text/javascript" charset="UTF-8">  </script>
<link rel="StyleSheet" href="css/css.css" media="all" type="text/css">

<script type="text/javascript">
    function change(page) {
        $("#content").load(page);
    }
</script>

</head>
<body>  

<div id="cabecera">
    <a href="javascript:change('contacto.html');"><button style="float:right; margin-right:49px;" type="button" name="btn_der" value="" class="menu_principal" id="btn_der">CONTACT</button></a>
    <button style="float:right;" type="button" name="" value="" class="menu_principal">PRODUCTS</button>
    <button style="float:right;" type="button" name="" value="" class="menu_principal" id="btn_izq">HOME</button>
</div>

<div id="cuerpo">
    <div id="content"></div> <!--This is the one where rest of html file should be loaded -->

<div id="tablet" class="reflect">
    <img src="imagenes/tablet.png" class="reflect">
</div>

</div>


</body>
</html>

另一方面，当我第一次加载 index.html HOME 按钮时，是否有可能出现在活动状态？我将不胜感激任何帮助。非常感谢。

【问题讨论】：

这看起来很基本。您是否在任何资源中查找过它？
当你点击按钮时会发生什么？浏览器会火吗？您在按钮上没有点击事件，所以它们应该如何加载页面。您重新发明 iframe 的原因是什么？
你什么也没找到？你显然不够努力。也许对每个按钮使用 jQuery .hide() 和 .show()，这可能是一个简单的开始？
您可以在这里查看：www.globalapplicationsusa.com
这是否带有任何 javascript 代码或者你认为 $("#content").load(page) 像魔术一样工作吗？ @epascarello：哈哈^_^

标签： javascript jquery html

【解决方案1】：

为什么它不起作用？

查看您的控制台。

GET http://www.globalapplicationsusa.com/jquery/jquery-1.10.1.min.js 404 (Not Found) 
Failed to load resource: the server responded with a status of 404 (Not Found)

您指向 jQuery 文件的链接已损坏，因此代码甚至无法运行。

【讨论】：

你是对的，但我确实在本地主机上（我正在尝试）但不在服务器上

【解决方案2】：

我认为 show hide jq 是你需要在这里使用的。这是我整理的链接。

$("#homeButton").click(function () {
    $("#cuerpo").show() ;
    $("#tablet").hide() ;

});

$("#procuctsButton").click(function () {
    $("#tablet").show() ;
    $("#cuerpo").hide() ;
});

http://jsfiddle.net/jebr224/GEZth/

你也可以尝试使用iframe，你可以让按钮改变frame的src。

【讨论】：

当您单击它们时，按钮不应该保持活动状态吗？
代码不会将它们置于活动状态。如果您希望这样做，只需将其写入 .click(function)。这有意义吗？

【解决方案3】：

尝试将脚本标签移动到页面底部，或至少在内容 div 后面。不是 100% 肯定，所以如果我错了，请不要开枪，但我认为 javascript 会执行并且 #content div 尚未加载到 DOM 中。所以javascript找不到元素。

JavaScript at bottom/top of web page?

【讨论】：

但是为什么按钮不保持活跃？？
其实有些奇怪...这在本地主机上不起作用，但在服务器上起作用