Question

我有一个带有超链接的页面，当我点击它时，我希望它从另一个文件加载内容，这样页面就不必刷新了。当前“.container”的内容应替换为外部html文件中“.container”的内容。

这是我的HTML

 <li> <a href="#" class="loader" id="indexLink">Chris Lebeau</a>

这是我在页面底部的jQuery。

  <script type="text/javascript">
     jQuery(document).ready(function() {
     jQuery("#indexLink").click(function(event) {
     jQuery("div.container").html(ajax_load).load("index.html");
    event.preventDefault();
});

}）;

当您点击ORG图表中的第一个人@ http://frommesetc.com/test/org.html时，.container应该淡出，而index.html中的.container应该淡入。

Answer 1

您的代码中缺少javascript:位：

<a href="javascript:load()">Chris Lebeau</a>

修改

您还需要定义load()函数：

<script type="text/javascript"> ... var loadUrl = "/index.html"; function load() { $("div.container").html(ajax_load).load(loadUrl); } </script>

这假设您在页面上有一些带有class="container"的HTML元素。

编辑2

最后，建议现在使用Unobtrusive JavaScript一天。要使用这种方法，请执行以下操作：

<a href="index.html" id="chris_lebeau">Chris Lebeau</a> <script type="text/javascript"> jQuery(document).ready(function() { jQuery("#chris_lebeau").click(function(event) { jQuery("div.container").html(ajax_load).load("index.html"); event.preventDefault(); }); }); </script>

这是当前“最好”的做法，但如果javascript:load()方法有效，那就足够了。

Answer 2

这里有几个问题。

首先，你没有“容器”类的元素 - 因此你的点击处理程序实际上什么也没做。

此外，如果你有一个点击监听器，那么就不需要从一个锚链接到JS函数。

以下是一个例子：

HTML:
<a class="button" href="#">Hello</a>
<div class="newcontent"></div>

JAVASCRIPT:
var loadingAnim = "<img src='img/ajax-loader.gif' alt='loading...' />";
var dataToLoad = "/index.html";
$("a.button").click(function(){
    $("div.newcontent")
        .html(loadingAnim)
        .load(dataToLoad);
});

Answer 3

使用

jQuery("div.container").load("index.html");

jquery load（）没有加载内容

3 个答案: