divにロードされている複数のページから1つのページに格納されているすべてのdivに切り替える

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> 

Answer 1

私はあなたが何をしたいのか理解していれば1つのHTML文書にすべてのあなたの「ページ」をロードし、ユーザーがメニューをクリックできるようにするためにはJavaScriptを使用していますあたかも別個のHTML文書であるかのようにページを表示するためのリンク。

各「ページ」は、最小限のコンテンツを持っている場合、ユーザーは代わりにクリックして、待っているのインスタント満足を与えるために、1つの文書にすべてをロードする正当な理由があります...私は、さまざまなウェブサイト上でこの技術を使用しています。すべてのケースで、私はCSSとjavascriptを組み合わせて使用​​しました。jqueryタブが適切な解決策であるかどうかはわかりませんが、おそらくそれは大規模なライブラリが物事が行わ - おそらくあなたは、私は以下を提供しますタイトな溶液から同意するかもしれない：それは自身のdivだ持っているが、理想的には、同じクラスを共有する必要があります

1. すべての「ページ」を。あなたが定義する

2. クラスは、CSSのディスプレイを使用して、これらのdivの非表示にする：それを

3. を隠しオーバー乗るクラスディレクティブにブロック：なしディレクティブ

4. をあなたのメインページはインラインスタイルディレクティブディスプレイを持つことができます

   メインページを除く各 "ページ"のIDは、短い単語またはパスフレーズのショートフレーズに設定する必要があります。

5. これらの「ページ」に対するアンカータグは、JavaScriptルーチンがそれらを操作して

6. また、これらのアンカータグには、適切な「ページ」を指すフラグメント識別子（http://en.wikipedia.org/wiki/Fragment_identifier）を使用してhrefを設定する必要があります。 idが "AboutUs"に設定された "ページ"がある場合、対応するアンカーは次のようになります。< a href = "＃AboutUs"> About Us </a> URLにフラグメント識別子を使用して、HTMLやその他の検索エンジンがHTMLドキュメント内の「ページ」という概念を処理できるようにします。また、人々はこれらのページに外部からリンクすることができ、すべての作業（次のステップ）を行うにはちょっとしたJavaScriptが必要です。

7. ユーザーがあなたのページのいずれかへの外部リンクをクリックしたときにそれが表示されるように[OK]を、私たちはいくつかのJavaScriptを必要とします。それは...あなたはbody.onloadにそれを置くことができ、ドキュメントの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と空想を取得したい場合は：ブロックを|表示するなし|非表示ページには、絶対位置と透明するページを設定することができます。 CSS3のトランジションを使用すると、不透明と透明の間の変化をアニメーション化して、ユーザーがリンクをクリックするとフェードイン効果が得られます。モーダルウィンドウが好きな場合は、nyromodalのようなライブラリを使用できますはいhttp://reinpetersen.com/examples/intlnk/#PageThree