jquery ajax中的动态内容加载

this is my first jquery code.Here i am trying to do a content loading mechanism using jquery ajax. It supposed to load content in a container div.But it is navigating me to a whole new page.I want that the 'a' tag does not navigate me to another page.What i am doing wrong here ?How i can achieve that?

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

1 个解决方案

#1

You are clicking on a link which should take you to the page before you do anything. Use event.preventDefault() to prevent this.

你点击了一个链接，在你做任何事情之前应该把你带到这个页面。使用event.preventDefault()来阻止它。

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

Also you should include jQuery using your localhost url : (I guess you are using proper link for the page?)

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

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

Remember, type="text/javascript" definition is not necessary in html5. But you didn't use the html5 doctype definition. Use this at the top of everything in the page.

记住，类型=“text/javascript”定义在html5中是不必要的。但是您没有使用html5 doctype定义。在页面的所有内容的顶部使用这个。

<!DOCTYPE html>

#1