Question

我有一个index.html，有一个DIV，我希望通过点击buttoms来加载其余的HTML文件，这里我有一个例子： enter image description here
我已经尝试了很多我在谷歌上发现的例子，但没有一个是有效的。在这里，我有最后一个使用的代码：

<!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 buttom出现在活动状态时是否有可能？我将不胜感激任何帮助。很多。

Answer 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文件链接已损坏，因此代码甚至无法运行。

Answer 2

我认为show hide jq是你需要在这里使用的。这是我放在一起的链接。

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

});

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

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

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

Answer 3

尝试将脚本标记移动到页面底部，或至少在内容div后面。不是100％肯定所以如果我错了就不要开枪，但我认为javascript会执行而#content div还没有加载到DOM中。所以javascript无法找到元素。

JavaScript at bottom/top of web page?

使用jquery将HTML加载到DIV中

3 个答案: