Php 从加载到div的多个页面切换到存储在一个页面上的所有div

大家好，我目前使用的是一个基本的div框架，它可以将其他页面的数据加载到div中。但现在我想转向一个解决方案，在一个HTML页面上存储和访问所有div内容。我一直在考虑使用jQuery选项卡。我将如何着手实施此解决方案

下面是我目前使用的代码：

<?php
if(isset($_GET['page'])){
  $page=$_GET['page'];
}else{
  $page='home';
}
?>

<div class="container">
  <div class="header">
  A Basic Div Framework
  </div>
  <div class="nav">
    <div class="<?php if($page=='home'){echo 'nav-button-mark';}else{echo 'nav-button';} ?>"><a href='?page=home'>首页 home</a></div>
    <div class="<?php if($page=='page1'){echo 'nav-button-mark';}else{echo 'nav-button';} ?>"><a href='?page=page1'>网页一 page 1</a></div>
    <div class="<?php if($page=='page2'){echo 'nav-button-mark';}else{echo 'nav-button';} ?>"><a href='?page=page2'>网页二 page 2</a></div>
    <div class="<?php if($page=='page3'){echo 'nav-button-mark';}else{echo 'nav-button';} ?>"><a href='?page=page3'>网页三 page 3</a></div>
  </div>
  <div class="content">
  <?php
  switch($page){
  case 'home':
    echo '<h1>Home Page Content</h1>';
    echo '<h3>$_GET</h3><pre>';print_r($_GET);echo '</pre>';
    echo '<h3>$_POST</h3><pre>';print_r($_POST);echo '</pre>';
    echo '<h3>$_SESSION</h3><pre>';print_r($_SESSION);echo '</pre>';
    break;
  case 'page1':
    echo '<h1>Page 1 Content</h1>';
    echo '<h3>$_GET</h3><pre>';print_r($_GET);echo '</pre>';
    echo '<h3>$_POST</h3><pre>';print_r($_POST);echo '</pre>';
    echo '<h3>$_SESSION</h3><pre>';print_r($_SESSION);echo '</pre>';
    break;
  case 'page2':
    echo '<h1>Page 2 Content</h1>';
    ?>
    <form method="post" action="?page=page3" />
    <input type='text' size='40' name='user-input' />
    <input type='submit' name='mysubmit' />
    </form>
    <?php
    echo '<h3>$_GET</h3><pre>';print_r($_GET);echo '</pre>';
    echo '<h3>$_POST</h3><pre>';print_r($_POST);echo '</pre>';
    echo '<h3>$_SESSION</h3><pre>';print_r($_SESSION);echo '</pre>';
    break;
  case 'page3':
    if(isset($_POST['mysubmit'])){
      $_SESSION['user-input']=$_POST['user-input'];}
    echo '<h1>Page 3 Content</h1>';
    echo '<h3>$_GET</h3><pre>';print_r($_GET);echo '</pre>';
    echo '<h3>$_POST</h3><pre>';print_r($_POST);echo '</pre>';
    echo '<h3>$_SESSION</h3><pre>';print_r($_SESSION);echo '</pre>';
    break;
  default:
    echo '<h1>Error: Unknown Page!!</h1>';
    break;
  }
  ?>
  </div>

基本Div框架

如果我了解您想要做的是将所有“页面”加载到一个html文档中，并使用javascript允许用户单击菜单链接以显示页面，就像它们可能是单独的html文档一样

如果每个“页面”都有最少的内容，那么就有理由将其全部加载到一个文档中，以使用户即时满意，而不是单击并等待。。。我在各种网站上使用过这种技术。在所有情况下，我都使用CSS和javascript的组合来帮助我实现它。。。我不知道jquery选项卡是否是正确的解决方案-也许是，但我发现大型库是完成任务的最佳方法-也许您会同意我将提供的以下紧凑解决方案：

每个“页面”都应该有自己的div，但理想情况下，共享同一个类

您定义的类应该使用css的display:none指令隐藏这些div

您的主页可以有一个内联样式指令display:block来覆盖隐藏它的class指令

除主页外，每个“页面”的id都应设置为一个短单词或Pascal大小写的短短语

这些“页面”的锚定标记应该共享一个类，以便javascript例程能够找到它们并对其进行操作

此外，这些锚定标记应该使用片段标识符设置href(http://en.wikipedia.org/wiki/Fragment_identifier)该点指向相应的“页面”，即，如果您有一个id设置为“AboutUs”的“页面”，则相应的锚可能如下所示：关于我们。您需要在URL中使用片段标识符，以便google和其他搜索引擎能够处理html文档中的“页面”概念。此外，人们将能够从外部链接到这些页面，而您只需要一点javascript就可以使其正常工作（下一步）

好的，我们需要一些javascript，这样当用户单击指向您的某个页面的外部链接时，它就会显示出来。它需要在加载文档时运行。。。您可以将其放入body.onload：

别忘了，我们需要函数来显示所需页面：

注意：较旧的浏览器不支持document.getElementsByClassName。。。有一些很棒的跨浏览器技术可以在不受支持时添加该功能。像jQuery这样的库也确保了所有浏览器的功能——再说一次，我不喜欢鸟枪方法，如果我发现缺少getElementsByClassName函数，我会用自己的getElementsByClassName函数重载文档dom节点

更有趣的东西：如果你想喜欢CSS3，而不是使用display:block | none来显示|隐藏页面，你可以将页面设置为绝对位置和透明。使用CSS3转换，您可以在用户单击链接时设置从不透明到透明的渐变效果的动画。。。或者，如果您喜欢模态窗口，您可以使用nyromodal之类的库（或者自己编写更符合您需要的脚本，这是我的首选）

---

可以在以下位置找到一个功能完整的示例：

是，但我想使用jQuery。使用jQuery可以做到这一点吗？所有页面都有最小的内容。绝对可以使用jQuery-它可以解决getElementsByTagName访问旧浏览器的问题。它还将提供一些脚本快捷方式。如果您对页面上的其他脚本使用jQuery，那么在页面中包含一个大型库就更有道理了。我是一个纯粹主义者，早期我们不得不使用28.8k和33.6k波特调制解调器，所以你必须对带宽非常谨慎-我似乎无法动摇这一点。。。jQuery（最小化）仍然很小-它是一个很好的库…再看看第6项-我做了一个小编辑，以允许显示锚标记样本。。。如果可能的话，我可以看看JSFIDLE上的一个例子吗？我可以为您编写代码，但我不会使用jQuery。老实说，我并不真正支持javascript库，因为我觉得它们浪费了带宽和内存。对于编译后的代码来说，情况就不同了，因为您可以使用库，而编译器仅在解析为机器代码时剥离必要的内容。但使用javascript，我们本质上就是编译器。为了带宽和内存占用，减少代码是我们的责任。此外，我不喜欢他们踩在美元符号上的方式，我认为最好保留美元符号来表示受保护的功能。

// the hash has the hash mark which we can parse away using String.substr()
var hash = document.location.hash.substr(1);
// now to call a function to display the desired page
ShowPage(hash);

function ShowPage(hash) {
// iterate the pages and show/hide
var pages = document.getElementsByClassName('page');
for (var p in pages) {

    if (pages[p].id == hash) pages[p].style.display = block;
    else pages[p].style.display = none;
}