javascript - jquery ajax 中的动态内容加载

标签 javascript jquery html css ajax

这是我的第一个 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>

最佳答案

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

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

您还应该使用您的本地主机 url 包含 jQuery :(我猜您正在为页面使用正确的链接?)

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

请记住,type="text/javascript" 定义在 html5 中不是必需的。但是你没有使用 html5 文档类型定义。在页面中所有内容的顶部使用它。

<!DOCTYPE html>

关于javascript - jquery ajax 中的动态内容加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34387854/

相关文章:

javascript - axios更新token时一直返回401

javascript - 如何等待异步调用在 foreach 循环 JavaScript 中执行?

c# - 使用 Razor 和 jQuery 在 ASP.NET Core 中级联下拉菜单

javascript - 从输入(类型 "button")更改为按钮标签不起作用

javascript - Sencha Touch 2 对接标签面板

javascript - 在提交后修改表单数据?

javascript - 在 iOS 中使用 Javascript 构建一个简单的 WebView APP

javascript - 使用 toISOString() 获取 ng-repeat 中的纪元日期

html - 根据 rails 4 中的页面显示不同的样式表

javascript - 如何读取nexus 7中的宽度和高度?