我目前正在制作一个网站，其中包含替换“body”部分中主要div的内容的系统。现在我发现我搞砸了一下因为每个内容都会放在同一个网址中。你有解决这个问题的想法吗？
HTML / PHP（index.php）：
<html>
<head>
<link rel="shortcut icon" href="pics/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link id="w" rel="stylesheet" href="Style/cs-index.css"></link>
<script type="text/javascript" src="Javascript/js-index.js"></script>
<title>7STAR.GA</title>
</head>
<body>
<nav id="nav" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:goToHome();">7STAR .GAMING</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="javascript:goToHome();">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Teamspeak <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="javascript:goToRanks();">Ranks</a></li>
<li><a href="javascript:goToStatistics();">Statistics</a></li>
<li><a href="#">Medals</a></li>
<li><a href="#">Musicbots</a></li>
<li><a href="javascript:goToViewer();">TSViewer</a></li>
</ul>
</li>
<li><a id="navB3" href="#">Knowledge Base</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a title="Twitter" href="javascript:goToExternal('twitter');"><img src="pics/twitter.jpg"></a> </li>
<li><a title="Steam" href="javascript:goToExternal('steam');"><img src="pics/steam.jpg"></a> </li>
<li><a title="Google" href="javascript:goToExternal('google');"><img src="pics/google.jpg"></a> </li>
<li><a title="Facebook" href="javascript:goToExternal('facebook');"><img src="pics/facebook.jpg"></a> </li>
<li><a title="Youtube" href="javascript:goToExternal('youtube');"><img src="pics/youtube.jpg"></a> </li>
</ul>
</div>
</div>
</nav>
<div id="inhalt">
<div id="jumboHome"class="jumbotron">
<h1 id="home">Home</h1>
<p id="homeUnder">7STAR .GAMING is a multi-gaming clan with a friendly community.</p>
</div>
<center>
<div class="page-header">
<h1>7STAR .GAMING<small> Since 2014</small></h1>
</div>
<div id="text" class="alert alert-info" role="alert">
<p>We are just another generic League of Legends gaming community based in good ol' EUW.
We will be offering our lovely gentle members a variety of people to play League of Legends with, and we just want to have fun, even when we lose ;D/
If we have piqued your interest, visit us at our Teamspeak 3 server !Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,</p>
</div>
</center>
<div id="jax">
</div>
</div>
<center><div id="viewer" class="alert alert-info downer" role="alert">
<?php include_once('plugins/tsviewer/tsviewer.php')?>
</center></div>
</body>
使用Javascript：
function goToExternal(site){
if(site=="twitter"){
window.open("https://twitter.com/7STARGA");
window.focus();
} else if(site=="steam"){
window.open("http://steamcommunity.com/groups/7STARGAMING/");
window.focus();
} else if(site=="google"){
window.open("https://plus.google.com/117232671286534599197/posts");
window.focus();
} else if(site=="youtube"){
window.open("#");
window.focus();
} else if(site=="facebook"){
window.open("https://www.facebook.com/7STARGA");
window.focus();
}
}
function goToHome(){
document.getElementById("viewer").style.display="none";
document.getElementById("inhalt").innerHTML =
"<div id=\"jumboHome\"class=\"jumbotron\">"
+"<h1 id=\"home\">Home</h1>"
+"<p id=\"homeUnder\">7STAR .GAMING is a multi-gaming clan with a friendly community.</p>"
+"</div>"
+"<center>"
+"<div class=\"page-header\">"
+"<h1>7STAR .GAMING<small> Since 2014</small></h1>"
+"</div>"
+"<div id=\"text\" class=\"alert alert-info\" role=\"alert\">"
+"<p>We are just another generic League of Legends gaming community based in good ol' EUW."
+" We will be offering our lovely gentle members a variety of people to play League of Legends with, and we just want to have fun, even when we lose ;D "
+"If we have piqued your interest, visit us at our Teamspeak 3 server !Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+"Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,</p>"
+"</div>"
+"</center>"
+"<div id=\"jax\">"
+"</div>"
}
function goToViewer(){
document.getElementById("viewer").style.display="block";
document.getElementById("inhalt").innerHTML = "<div id=\"jumboHome\"class=\"jumbotron\">"
+"<h1 id=\"home\">TeamSpeak Viewer</h1>"
+"<p id=\"homeUnder\">7STAR .GAMING offers a nice and big Teamspeak.</p>"
+"</div>"
+"<center>"
+"<div class=\"page-header\">"
+"<h1>Teamspeak<small> Overview</small></h1>"
+"</div>"
+"</center>"
+"<div id=\"jax\">"
+"</div>";
}
function goToRanks(){
document.getElementById("viewer").style.display="none";
document.getElementById("inhalt").innerHTML = "<div id=\"jumboHome\"class=\"jumbotron\">"
+"<h1 id=\"home\">Ranks</h1>"
+"<p id=\"homeUnder\">7STAR .GAMING offers a wide range of nice Teamspeak Ranks</p>"
+"</div>"
+"<center>"
+"<div class=\"page-header\">"
+"<h1>Ranks<small> Overview</small></h1>"
+"</div>"
+"<div id=\"text\" class=\"alert alert-info\" role=\"alert\">"
+"<p>We are using <mark>a system</mark> that awards you a <mark>higher rank based on the amount of hours you are connected to our teamspeak server</mark>. Once you have met the required amount of hours to earn a rank, <mark>a bot will automatically raise your rank</mark> by one. <mark>We're using the ranks of the United States Army</mark>, as many people are familiar with them and it is easier to know who your supervisors are.<br>Here are our Teamspeak Ranks:</p>"
+"</div>"
+"<div id=\"table\" class=\"alert alert-info\" role=\"alert\">"
+"<table id=\"tableRank\" class=\"table table-striped table-hover\">"
+"<thead>"
+"<tr>"
+"<th>Name</th>"
+"<th>Hours</th>"
+"</tr>"
+"</thead>"
+"<tr>"
+"<td>Private</td>"
+"<td>0</td>"
+"</tr>"
+"<tr>"
+"<td>Private First Class</td>"
+"<td>10</td>"
+"</tr>"
+"</thead>"
+"<tr>"
+"<td>Specialist</td>"
+"<td>13</td>"
+"</tr>"
+"<tr>"
+"<td>Corporal</td>"
+"<td>16</td>"
+"</tr>"
+"</thead>"
+"<tr>"
+"<td>Sergeant</td>"
+"<td>20</td>"
+"</tr>"
+"<tr>"
+"<td>Staff Sergeant</td>"
+"<td>24</td>"
+"</tr>"
+"</thead>"
+"<tr>"
+"<td>Sergeant First Class</td>"
+"<td>31</td>"
+"</tr>"
+"<tr>"
+"<td>Master Sergeant</td>"
+"<td>38</td>"
+"</tr>"
+"</thead>"
+"<tr>"
+"<td>First Sergeant</td>"
+"<td>48</td>"
+"</tr>"
+"<tr>"
+"<td>Sergeant Major</td>"
+"<td>60</td>"
+"</tr>"
+"</thead>"
+"<tr>"
+"<td>Command Sergeant Major</td>"
+"<td>75</td>"
+"</tr>"
+"<tr>"
+"<td>Sergeant Major of the Army</td>"
+"<td>93</td>"
+"</tr>"
+"</thead>"
+"<tr>"
+"<td>Warrant Officer 1</td>"
+"<td>116</td>"
+"</tr>"
+"<tr>"
+"<td>Warrant Officer 2</td>"
+"<td>146</td>"
+"</tr>"
+"</thead>"
+"<tr>"
+"<td>Warrant Officer 3</td>"
+"<td>182</td>"
+"</tr>"
+"<tr>"
+"<td>Warrant Officer 4</td>"
+"<td>227</td>"
+"</tr>"
+"</thead>"
+"<tr>"
+"<td>Warrant Officer 5</td>"
+"<td>284</td>"
+"</tr>"
+"<tr>"
+"<td>Second Lieutenant</td>"
+"<td>355</td>"
+"</tr>"
+"</thead>"
+"<tr>"
+"<td>First Lieutenant</td>"
+"<td>444</td>"
+"</tr>"
+"<tr>"
+"<td>Captain</td>"
+"<td>555</td>"
+"</tr>"
+"</thead>"
+"<tr>"
+"<td>Major</td>"
+"<td>694</td>"
+"</tr>"
+"<tr>"
+"<td>Lieutenant Colonel </td>"
+"<td>867</td>"
+"</tr>"
+"</thead>"
+"<tr>"
+"<td>Colonel </td>"
+"<td>1084</td>"
+"</tr>"
+"<tr>"
+"<td>Brigadier General</td>"
+"<td>1694</td>"
+"</tr>"
+"</thead>"
+"<tr>"
+"<td>Major General</td>"
+"<td>2118</td>"
+"</tr>"
+"</table>"
+"</div>"
+"</center>"
+"<div id=\"jax\">"
+"</div>";
document.getElementById("text").style.width ="550px";
document.getElementById("text").style.height ="143px";
}
如果你也需要style.css我也可以发布。
答案 0 :(得分：0)
如果您需要具有相同布局（顶部和底部HTML）的不同内容，也许您应该研究MVC。稍后将更容易实现和维护。
以下是一个极其简化的示例，可帮助您解决问题：首先，您使用所有网页共有的HTML layout.php：
<!-- view/main.layout.php -->
<html>
<head>
<title><?php echo $title ?></title>
</head>
<body>
<?php echo $contents ?>
</body>
</html>
然后创建包含内容的页面：
<!-- mypage.php -->
<?php ob_start(); ?>
<?php $title = 'My site' ?>
<h1>Contents of my page</h1>
<div>Contents of the page...</div>
<?php
$contents = ob_get_clean();
include 'view/main.layout.php';
?>
当您加入main.layout.php文件时，它会输出$title文件中创建的变量$contents和contents.php。
此示例大致基于Symfony versus Flat PHP页面中的示例，值得一试，它提供了有关MVC如何工作的详细分步概述。
您可以选择多种框架，我喜欢的框架是MINI，因为它易于使用。
答案 1 :(得分：0)
function goToHome(){
document.getElementById("viewer").style.display="none";
document.getElementById("inhalt").innerHTML = (…);
window.history.pushState({"method": "goToHome"}, "", "/home.html");
}
function goToViewer(){
document.getElementById("viewer").style.display="block";
document.getElementById("inhalt").innerHTML = (…);
window.history.pushState({"method": "goToViewer"}, "", "/viewer.html");
}
function goToRanks(){
document.getElementById("viewer").style.display="none";
document.getElementById("inhalt").innerHTML = (…);
document.getElementById("text").style.width ="550px";
document.getElementById("text").style.height ="143px";
window.history.pushState({"method": "goToRanks"}, "", "/ranks.html");
}
但是你还需要设置ModRewrite处理url复制粘贴用例。
RewriteEngine on
RewriteRule ^(ranks|viewer|home)\.html$ index.html
然后在java脚本中检查用户请求的页面：
var path = window.location.pathname;
var file = path.substring(path.lastIndexOf('/')+1);
switch(file) {
case 'ranks.html':
goToRanks();
break;
case 'viewer.html':
goToViewer();
break;
case 'home.html':
goToHome();
break;
default:
// handle 404
}
如果您不想/不能使用ModRewrite，则需要在所有这些位置复制文件（错误）或使用一个具有不同#ID的URL