jquery ajax中的动态内容加载

Question

这是我的第一个jquery代码。我正在尝试使用jquery ajax进行内容加载机制。 它应该在容器div中加载内容。但它正在导航我到一个全新的页面。我希望'a'标签不会导航我到另一个页面。我在这里做错了什么？我怎么能实现呢？

<html>

<body>
<ul>
<li><a href='about.html'>about</a></li>
<li><a href='faq.html'>faq</a></li>
</ul>
<div id='content'></div>
<script src='c/xampp/htdocs/practice/jquery/jquery.js'></script>
<script>
$('a').click(function(){
       var page=$(this).attr('href');
       $('#content').load(page);
       return false;
});
</script>
</body>
</html>

Answer 1

您正在点击链接，该链接会在您执行任何操作之前将您带到该页面。 使用event.preventDefault()来防止这种情况。

$('a').click(function(event){
       event.preventDefault();
       var page=$(this).attr('href');
       $('#content').load(page);
       return false;
});

你还应该使用你的localhost url包含jQuery :(我猜你正在使用适当的页面链接？）

 <script src='http://localhost/practice/jquery/jquery.js'></script>

请记住，在html5中不需要type="text/javascript"定义。 但是你没有使用html5 doctype定义。 在页面中的所有内容的顶部使用此选项。

<!DOCTYPE html>

jquery ajax中的动态内容加载

问题描述

1 个解决方案

解决方案1
3 已采纳 2015-12-21 01:41:18

jquery ajax中的动态内容加载

问题描述

1 个解决方案

解决方案1 3 已采纳 2015-12-21 01:41:18

解决方案1
3 已采纳 2015-12-21 01:41:18