javascript 如何通过单击菜单中的 Li 将 HTML 页面加载到 DIV 中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22588976/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to load a HTML-page into a DIV by clicking a Li inside a menu?
提问by Kheema Pandey
i've came across a really annoying issue.
我遇到了一个非常烦人的问题。
So, my plan is to have a UL-menu containing different ammounts of Li inside of it. And when i click each of them i want to load a new HTML-page into my "Content-DIV".
所以，我的计划是有一个 UL 菜单，其中包含不同数量的 Li。当我单击它们中的每一个时，我想将一个新的 HTML 页面加载到我的“内容 DIV”中。
I've done alot of research and i found out about Ajax and Jquery. I've tried so many different codes to make it work, and i've managed to link my .js file to my index file sucessfully. I tried it out with a simpel Alert command. But then when i try to load my page into my DIV, it doesnt work at all, and i have no idea whats wrong! I found a link here on stackoverflow which were almost the same, tho they didnt use a menu to open up the pages.
我做了很多研究，发现了 Ajax 和 Jquery。我已经尝试了很多不同的代码来使它工作，并且我已经成功地将我的 .js 文件链接到我的索引文件。我用一个简单的警报命令尝试了它。但是当我尝试将我的页面加载到我的 DIV 中时，它根本不起作用，而且我不知道出了什么问题！我在 stackoverflow 上找到了一个几乎相同的链接，但他们没有使用菜单来打开页面。
So here is my index:
所以这是我的索引：
<div id="Left">
<ul id="nav" >
<li><a href="Home.html id="load_home">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a>
</ul>
</div>
<div id="content">
</div>
<script>$(document).ready( function() {
$("#load_home").on("click", function() {
$("#content").load("Home.html");
});
});
</script>
Any ideas? Any answers would be much appreciated. Thank you.
有任何想法吗？任何答案将不胜感激。谢谢你。
/Martin
/马丁
回答by Kheema Pandey
You wrote the jQuery code in wrong manners Also please make sure you've are calling jQuery library file.
您以错误的方式编写了 jQuery 代码另外请确保您正在调用 jQuery 库文件。
JavaScript code
JavaScript 代码
$(document).ready(function() {
$('a').click(function(e) {
e.preventDefault();
$("#content").load($(this).attr('href'));
});
});
HTML Code
HTML代码
<div id="Left">
<ul id="nav">
<li><a href="page1.html">Home</a></li>
<li><a href="page2.html">Page 1</a></li>
<li><a href="page3.html">Page 2</a></li>
</ul>
</div>
<div id="content">The page will display here</div>
回答by oonoroo
you will try this code instead
你会试试这个代码
$(document).ready( function() {
$.get('Home.html', function(data) {
$("#content").html(data);
});
});
回答by Rahul Wagh
well from your above code i couldn't see you have created any DIV with the ID : - content So jquery is ok but from the above code i can say....jquery is not able to find the #content div.....
好吧，从您上面的代码中，我看不到您创建了任何带有 ID 的 DIV：- content 所以 jquery 没问题，但是从上面的代码中我可以说....jquery 无法找到 #content div... ..
Please see below example which might help in your case : -
请参阅下面的示例，这可能对您的情况有所帮助：-
<ul>
<li><a id="page1" href="#">About</a></li>
<li><a id="page2" href="#">Community</a></li>
<li><a id="page3" href="#">Sponsor</a></li>
</ul>
<div id="result" style="clear:both;">
</div>
At the head part, we need to include JQuery library.
在头部，我们需要包含 JQuery 库。
<script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script>
Add the following code to head part.
将以下代码添加到头部。
<script type="text/javascript">
$(document).ready(function(){
$("#page1").click(function(){
$('#result').load('pages/page1.html');
//alert("Thanks for visiting!");
});
$("#page2").click(function(){
$('#result').load('pages/page2.html');
//alert("Thanks for visiting!");
});
});
</script>
