php - 複数のページが div に読み込まれている状態から、すべての div が 1 つのページに格納されている状態に切り替える

Question

こんにちは、私は現在、他のページから div にデータをロードする基本的な div フレームワークを使用しています。しかし今は、すべての div コンテンツが 1 つのHTMLページに保存され、アクセスされるソリューションに移行したいと考えています。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>

score 1 · Accepted Answer

あなたが何をしたいのかを理解していれば、すべての「ページ」を1つのhtmlドキュメントにロードし、javascriptを使用して、ユーザーがメニューリンクをクリックして、ページを別々のhtmlドキュメントであるかのように表示できるようにします。

各「ページ」のコンテンツが最小限である場合、ユーザーがクリックして待つのではなく、すぐに満足できるようにすべてを 1 つのドキュメントにロードする正当な理由があります... 私はこの手法をさまざまな Web サイトで使用しました。すべての場合において、CSS と JavaScript の組み合わせを使用してそれを実現しました...jquery タブが適切なソリューションであるかどうかはわかりませんが、おそらくそうですが、大規模なライブラリを取得するための散弾的なアプローチであることがわかりました完了したこと-おそらく、私が以下に提供するタイトなソリューションに同意するかもしれません:

すべての「ページ」には独自の div が必要ですが、理想的には、同じクラスを共有します。
定義するクラスは、css の display:none ディレクティブを使用してこれらの div を非表示にする必要があります
メインページには、それを非表示にするクラスディレクティブをオーバーライドするためのインラインスタイルディレクティブ display:block を含めることができます。
メインページを除く各「ページ」は、id を短い単語または Pascal ケースの短いフレーズに設定する必要があります。
これらの「ページ」へのアンカータグは、javascript ルーチンがそれらを見つけて操作できるように、クラスを共有する必要があります。
また、これらのアンカータグには、適切な「ページ」を指すフラグメント識別子 (http://en.wikipedia.org/wiki/Fragment_identifier) を設定した href が必要です。ID が「AboutUs」に設定された「ページ」がある場合、対応するアンカーは < a href="#AboutUs">About Us</a > のようになります。Google やその他の検索エンジンが HTML ドキュメント内のこの「ページ」の概念を処理できるように、URL でフラグメント識別子を使用する必要があります。また、人々はこれらのページに外部からリンクすることができ、すべてを機能させるために少しの JavaScript が必要です (次のステップ)。
わかりました。ユーザーがいずれかのページへの外部リンクをクリックしたときに表示されるように、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);
```

忘れないでください、目的のページを表示する関数が必要です。

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にあります。

php - 複数のページが div に読み込まれている状態から、すべての div が 1 つのページに格納されている状態に切り替える

1 に答える 1

Related

Reference