Question

我已经搜索了很多，我可以找到解决方案但不是我想要的方式，我知道应该可以使用菜单链接（div）作为触发器来更改div元素中的HTML文件，但我找不到办法。这是我到目前为止的代码：

目标DIV（HTML）：

<div id="mainContent" class="content"><!-- content will be loaded here --></div>

触发菜单（HMTL）：

<a id="load_test" href="#"><div class="menu">Services</div></a>

CSS在这种情况下并不重要......所以这里是jQuery：

$(document).ready( function() {
    $("#load_test").click(function(){
        $('#mainContent').html("<object type='text/html' data='test.html'></object>");
    })
});

这是我在头脑中做错了：

<script type="text/javascript" src="script.js"></script>
<script src="jquery-1.10.2.min.js"></script>

他们需要切换：

<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="script.js"></script>

Answer 1

使用iframe加载test.html页面，并确保在脚本

之前包含jQuery文件

$( function() {
    $("#load_test").click(function(){
        $('#mainContent').html("<iframe src='test.html' width='100' height='100'></iframe>");
    })
});

Answer 2

首先，将jQuery输入控制台并查看是否已定义。如果是，请试试这个：

(function($) { 
    $("#load_test").click(function(){
        $('#mainContent').html("<object type='text/html' data='test.html'></object>");
    })
})(jQuery);

如果没有，那么包含脚本的方式可能有问题。

Javascript innerHTML代码不起作用

2 个答案: