0

大家好，我目前正在使用一个基本的 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>
4

1 回答 1

1

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

如果每个“页面”的内容最少，那么就有理由将其全部加载到一个文档中，以让用户立即满意，而不是点击和等待……我已经在各种网站上使用过这种技术。在所有情况下，我都使用了 CSS 和 javascript 的组合来帮助我完成它......我不知道 jquery 选项卡是否是正确的解决方案 - 也许是，但我发现大型库是获取的霰弹枪方法事情已经完成 - 也许您可能会同意我将在下面提供的严格解决方案：

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

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

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

  4. 每个“页面”，不包括主页，都应该将其 id 设置为一个简短的单词或 Pascal 大小写的短语

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

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

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

    // 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);

  8. 不要忘记，我们需要显示所需页面的函数：

    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;
}

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

更有趣的东西：如果你想使用 CSS3，而不是使用 display:block|none 来显示|隐藏页面，你可以将页面设置为绝对定位和透明。使用 CSS3 过渡，您可以在不透明到透明之间设置动画，以在用户单击链接时产生淡入效果……或者，如果您喜欢模态窗口，您可以使用像 nyromodal 之类的库（或编写更紧密的脚本您自己的需求，这是我的偏好）

可以在以下位置找到一个功能齐全的示例：http ://reinpetersen.com/examples/intlnk/#PageThree

于 2012-05-07T11:09:53.550 回答