2016-06-01 12 views
-2

外部HTMLページを呼び出すためにいくつかのハイパーリンクが付いたナビゲーションバーを使用したいが、他のページ内のコードにウェブページ全体を繰り返すことは望ましくない。divをPHPコードで挿入するにはどうしたらいいですか?

私はindex.html内のdivに外部ページを挿入する目的でリンクをクリックすると、Webページを呼び出すことを考えていました。

これは簡単にPHPコードを使用することで可能ですか?

またはjqueryを使用する必要がありますか?

お返事ありがとうございます。

+2

は、あなたがこれまでにしようとしているものをあなたのコードを共有しますか? –

+0

あなたは.htmlファイル内でphpタグを使うことはできません –

+0

私が理解できることによると、PHPは必要ありません。何が必要なのですか?jquery –

答えて

-2

ああ、こんにちはPHPで簡単です。あなたは(あなたがそれらをリンクすることができるようにとstartingContent.html、各ページに1つのhtml)この構造でindex.phpページを作成する必要があり :

<body> 
<div id="menu"> 
    <ul> 
     <li><a href="?p=content1"> Page 1 </a></li> 
     <li><a href="?p=content2"> Page 2 </a></li> 
    </ul> 
</div> 
<div id="content"> 
    <?php 
     if(isset($_GET['p'])) { 
      $pag = $_GET['p']; 
     } 
     else { 
      $pag = "indexContent"; 
     } 
     include ($pag.".html"); 
     ?> 
</div> 

実男性が使用することをドント

+1

lol ... PHPはリンクがクリックされるたびにページをリロードします。しかし、jQueryはリロードのストレスを感じることなく、必要なdivにデータをロードするだけです。:p –

0

更新済み 最初にページが読み込まれたときにdivにページを読み込みたい場合は、このようにすることができます。

<div id="load_content_div"><?php include "path/to/page"; ?></div> 

しかし、あなたが最初のロードでのdivにコンテンツをロードするために使用をあなたのページにjQueryのメソッドをPHPのコードを使用しない場合:

$(document).ready(function(){ 
    $('#load_content_div').load('path/to/page'); 
}); 

次に、あなたが負荷にこれを使用リンクがクリックされたのdivのページ:次に

<div id="load_content_div"></div> 
//the hyperlinks 
<a href="javascript:;" alt="page1.html">link1</a> 
<a href="javascript:;" alt="page2.html">link2</a> 
<a href="javascript:;" alt="page3.html">link3</a> 

は、あなたがこのようにjQueryのAjaxのメソッドを使用します。

$('a').click(function(){ 
    page = $(this).attr('alt'); 
    $.ajax({ 
     type: 'GET', 
     url: page, 
     cache: false, 
     success:function(data){ 
      $('#load_content_div').html(data); 
     } 
    }); 
}); 

しかし、あなたのコード

0

にあなたのjQueryライブラリを含めることを忘れないでください、私はあなたがPHPとJavaScript(jQueryの、アヤックス)の両方が必要だと思います。

ハイパーリンクを含むリストをHTMLファイルとして記述できます。そして、あなたはPHPコードを使用してそれを含めるよ。

<!-- nav.html --> 
<ul> 
    <li><a href="#">Your nav li here</li> 
    <li>...</li> 
</ul> 


<?php 
    // index.php 
    include 'path/to/nav.html'; 
    // your other code 
?> 

その後、あなたはあなたがあまりにもちょうどjQueryを使ってそれを行うことができますJavaScriptとAJAX

-2

経由で他のHTMLページを含めることができます。

<script type="text/javascript"> 
    $(document).ready(function() { 

     $("#btn1").click(function() { 

      $("#display").load("test.html"); 

     }); 

    }); 
</script> 
関連する問題