使用jQuery而不是html框架来显示菜单栏中的选定页面，而无需在同一页面中重新加载 [英] Use jQuery instead of html frames to display the selected page from menu bar without reloading in same page
本文介绍了使用jQuery而不是html框架来显示菜单栏中的选定页面，而无需在同一页面中重新加载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
由于HTML框架已过时，因此我想使用JQuery.这可以通过任何其他方法来实现.
Since HTML frames are out of date I want to use JQuery .Can this be achieved by any other methods.
推荐答案
您可以使用任何AJAX实现来实现. jQuery就是这样一种实现，它可以异步加载页面内容而无需重新加载整个页面.
You can achieve this using any AJAX implementation. jQuery is one such implementation which can asynchronously load page content without reloading the entire page.
如何使用jQuery实现此功能的基本示例如下:
A basic example of how you could implement this with jQuery would be something like the following:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
</head>
<body>
<div id="menu">
<ul>
<li><a href="/page1">Page 1</a></li>
<li><a href="/page2">Page 2</a></li>
<li><a href="/page3">Page 3</a></li>
</ul>
</div>
<div id="content">
<h1>Welcome</h1>
<p>Welcome page....</p>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$( document ).ready(function(){
// When you click on an anchor in the #menu
$("#menu a").click(function(event){
event.preventDefault()
//Get the content from the page in the anchor herf
$.ajax({
url:$(this).attr('href'),
method:'POST',
async:true,
complete: function(xhr){
//set the innerHTML of #content with the file content
$('#content').html(xhr.responseText);
}
});
});
});
</script>
</body>
</html>
然后在页面文件中，您只需要在ajax调用的目标中加载要加载的内容:
Then in your page files, you would only have the content you wanted to load in the target of your ajax call:
<h1>Page 1</h1>
<p>This is page 1...</p>
这篇关于使用jQuery而不是html框架来显示菜单栏中的选定页面，而无需在同一页面中重新加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
