include "header.php";
include $contentpage;
include "footer.php";
您需要提供不同的内容文件名以便加载。
Header.php
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page title</title>
</head>
<body>
BLALBLA CONTENT
content.php
echo $content;
footer.php
</body>
</html>
$( "#result" ).load( "ajax/test.html", function() {
alert( "Load was performed." );
});
$.ajax。 $.ajax({
type: 'GET',
url: "http://www.somewhere.com/json",
data:bcData,
error: function(jqXHR, textStatus, errorThrown){
console.log(jqXHR);
console.log(textStatus);
console.log(errorThrown);
},
success: function(data){
var ul = $("<ul/>:);
for (var i=0;i < data.items.length;i++){
var li = $("<li/>",{"html":data[i].html});
ul.append(li);
}
$("#someConainer").append(ul);
}
});
javascript。window.history.replaceState(null, <name to appear in history>, <url>);
了解有关操作历史记录的更多信息在此处。
尝试像这样做
头部、页脚和导航栏是固定的，只有内容会像这样不断变化。
header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
//css goes here
<script src="jquery.js"></script>
...
</head>
<body>
<div style="float:left;width:40%;">
<?php include 'left_nav.php';?>
</div>
<div style="float:right;width:60%;">
footer.php
</div>
</body>
</html>
left_nav.php
<ul>
<li><a href="sample1.php">A</a></li>
<li><a href="sample2.php">B</a></li>
</ul>
sample1.php
<?php include 'header.php';?>
First page Content A
<?php include 'footer.php';?>
sample2.php
<?php include 'header.php';?>
Second page Content B
<?php include 'footer.php';?>
你提供的例子很简单：
每个左侧菜单都是一个锚点，指向一个新的htm文件，因此URL会改变。例如：
<div id="left" class="leftmenu">
<div class="menuitem"></div>
<div id="tour_tab_1" class="menuitem active" onclick="tour_show_tab(1);"><a href="/tour.html"><span class="sprite-left-menu sprite-left-menu-edit"></span>Build web forms</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
<div class="menuitem separator"></div>
<div id="tour_tab_2" class="menuitem " onclick="tour_show_tab(2);"><a href="/styling-forms.htm"><span class="sprite-left-menu sprite-left-menu-themes"></span>Add branding</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
<div class="menuitem separator"></div>
<div id="tour_tab_3" class="menuitem " onclick="tour_show_tab(3);"><a href="/mobile-web-forms.htm"><span class="sprite-left-menu sprite-left-menu-code"></span>Publish anywhere</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
<div class="menuitem separator"></div>
<div id="tour_tab_4" class="menuitem " onclick="tour_show_tab(4);"><a href="/form-to-email-submissions.htm"><span class="sprite-left-menu sprite-left-menu-notif"></span>Get notifications</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
<div class="menuitem separator"></div>
<div id="tour_tab_5" class="menuitem " onclick="tour_show_tab(5);"><a href="/online-database-forms.htm"><span class="sprite-left-menu sprite-left-menu-submissions"></span>Manage data</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
<div class="menuitem separator"></div>
<div id="tour_tab_6" class="menuitem " onclick="tour_show_tab(8);"><a href="/apps-integrations.htm"><span class="sprite-left-menu sprite-left-menu-apps"></span>Add 3<sup>rd</sup> party apps</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
<div class="menuitem separator"></div>
<div id="tour_tab_7" class="menuitem " onclick="tour_show_tab(7);"><a href="/purchase-order-forms.htm"><span class="sprite-left-menu sprite-left-menu-payments"></span>Accept payments</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
<div class="menuitem separator"></div>
<div id="tour_tab_8" class="menuitem " onclick="tour_show_tab(6);"><a href="/conditional-logic-forms.htm"><span class="sprite-left-menu sprite-left-menu-rules"></span>Branch forms</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
<div class="menuitem separator"></div>
<div id="tour_tab_9" class="menuitem " onclick="tour_show_tab(10);"><a href="/translate-forms.htm"><span class="sprite-left-menu sprite-left-menu-translations"></span>Go multilingual</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
<div class="menuitem separator"></div>
<div id="tour_tab_10" class="menuitem " onclick="tour_show_tab(9);"><a href="/sub-users.htm"><span class="sprite-left-menu sprite-left-menu-users-pink"></span>Create subusers</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
<div class="menuitem separator"></div>
<div id="tour_tab_11" class="menuitem " onclick="tour_show_tab(11);"><a href="/captcha-form-validation.htm"><span class="sprite-left-menu sprite-left-menu-security"></span>Stay secure</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
<div class="menuitem separator"></div>
</div>
你提供给我们的网页只是一个普通的网站。正如你所注意到的，左侧栏中的链接会带你到另一个页面。主要内容在包装器中，但头部、页脚和其他所有内容都是相同的（大多数情况下）。这可以通过动态创建内容（使用PHP或其他Web开发语言）来实现。基本上，你有一个包含更多块或页面的大页面。其中之一是主列，它根据你提供的链接创建其内容。此外，你可以使用.htaccess文件创建重定向，以使你的链接格式更好。nkmol的答案基本上回答了你的问题。
尝试研究Web开发框架，因为它们可以更好地解释你的问题。
所以问题是你想加载这个内容，但又不想刷新页面。
你不想使用Ajax（老实说这可能是你应该做的最好方式）。 而且你也不想重新加载页面。
如果你正在使用MVC来构建这个项目，那么建议的方法是按照上面的答案去做。添加PHP包含文件以保留页眉和页脚。
但是如果你真的坚持不使用任何一种方法。
你可以将所有内容都放在同一页上，并从一开始就隐藏它们。然后使用左侧菜单项，在基于你的选择的情况下，使用JavaScript显示或隐藏右侧内容。
这是你在没有MVC、AJAX或页面重新加载的情况下完成任务的唯一方法。
强烈不推荐。但是，可以完成工作...