Html 单击时加载 div 中链接的页面内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26640856/
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
Load page content of link in div when clicked
提问by user2897821
Hoping someone could assist me with this issue,
希望有人能帮我解决这个问题，
I have created a JSFiddlewith the code
我用代码创建了一个JSFiddle
I have created some basic code of a site with a header, navigation menu with six links, the main div and right side sidebar,
我已经创建了一个网站的一些基本代码，带有标题、带有六个链接的导航菜单、主 div 和右侧边栏，
What I am looking to achieve is that when a user clicks one of the six page links on the nav menu (e.g clicks page4.html).
我希望实现的是，当用户单击导航菜单上的六个页面链接之一（例如 clicks page4.html）。
The content from that page link which was clicked (e.g page4.html), is loaded into the main div without the rest of the page (i.e header, nav, right sidebar), refreshing at all.
来自被点击的页面链接的内容（例如page4.html）被加载到主 div 中，而没有页面的其余部分（即标题、导航、右侧边栏），完全刷新。
That div should remain to show that content (e.g page4.html) until the user clicks another link (e.g page6.html).
该 div 应保持显示该内容（例如page4.html），直到用户单击另一个链接（例如page6.html）。
Then only the content in the main div should change from (e.g page4.htmlto page 6.html) without any other content reloading/refreshing of the page
然后只有主 div 中的内容应该从（例如page4.html到page 6.html）更改，而不需要重新加载/刷新页面的任何其他内容
Hopefully, I have been able to make it clear enough of what I'm need to do.
希望我已经能够清楚地说明我需要做什么。
Here is the code:
这是代码：
.header {
text-align: center;
width: 100%;
height: 90px;
}
.nav {
float: left;
width: 20%;
height: 500px;
background: grey;
}
.main {
float: left;
width: 60%;
height: 500px;
background: lightblue;
}
.rightsidebar {
float: right;
width: 20%;
height: 500px;
background: lightgreen;
}<body>
<div class="container">
<div class="header">Site name</div>
<div class="nav">
<ul>
<li><a href="#">Page1.html</a>
</li>
<li><a href="#">Page2.html</a>
</li>
<li><a href="#">Page3.html</a>
</li>
<li><a href="#">Page4.html</a>
</li>
<li><a href="#">Page5.html</a>
</li>
<li><a href="#">Page6.html</a>
</li>
</ul>
</div>
<div class="main">This is the Main Div that will load either page1.html -> page6.html depending on which Nav link the user clicks.. Note that when user clicks the nav link.. Only this div should reload with the content of said clicked page. i.e. If user clicks page4.html
link in nva menu. This lightblue div will change from whats written here now and load the content from page4.html in this div but the header, Nav, and rightsidebar of the page will stay static and not refresh at all.</div>
<div class="rightsidebar">blah blah blah blah blah</div>
</div>回答by Shikhar
Add href attributes to your links to the respective pages you want to go to.
将 href 属性添加到您要访问的相应页面的链接中。
<li><a href="Page1.html">Page1.html</a></li>
<li><a href="Page2.html">Page2.html</a></li>
And then the following should solve your issue via Jquery
然后以下内容应该通过Jquery解决您的问题
$(function(){
$(".nav li a").click(function(e){
e.preventDefault(); //To prevent the default anchor tag behaviour
var url = this.href;
$(".main").load(url);
});
});
回答by pmahomme
One option is to use jQuery's load function. Give your navigation anchors unique ID's, and from there you can use some code similar to this:
一种选择是使用 jQuery 的加载功能。给你的导航锚唯一的 ID，然后你可以使用一些类似的代码：
$(function () {
$("#nav_page_a").on("click", function () {
$("#main").load("PageA.html");
});
$("#nav_page_b").on("click", function () {
$("#main").load("PageB.html");
});
});
Have a look at this: http://api.jquery.com/load/
看看这个：http: //api.jquery.com/load/
回答by shakirthow
using jQuery
使用 jQuery
$(".main").load("yourpage.html");
