0

我有一个带有超链接的页面，单击该超链接时，我希望它从另一个文件加载内容，这样页面就不必刷新。当前“.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 应该淡入。

4

3 回答 3

3

您的代码中缺少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".

编辑 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()方法有效，那就足够了。

于 2012-08-17T02:31:44.567 回答
0

你在这里有几个问题。

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

此外，如果你有一个点击监听器，那么就不需要从锚链接到 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);
});
于 2012-08-17T02:45:16.547 回答
0

采用

jQuery("div.container").load("index.html");
于 2012-08-17T07:04:47.623 回答