3

ul 要素と li 要素で作成されたメニューがあります。 li のいずれかをクリックすると、 href を使用してページが開きます。問題は、メイン ファイルの同じページに href を含むページを開きたいということです。フッターとヘッダーがあります。

4

5 に答える 5

2

ページを更新せずにそれを行う簡単な方法は、
AJAXテクノロジとJS (+ ほんの少しのjQuery )を使用することです。

検索エンジンに適した AJAX 駆動の Web サイト:

基本的な例:

header.php

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>AJAX driven site - by Roko C.B. - TEST</title>
</head>
<body>

<?php include 'menu.html'; ?>

menu.html

<ul id="nav">
    <li><a href="index.php"> HOME </a></li> 
    <li><a href="foo.php"> FOO </a></li>
    <li><a href="bar.php"> BAR </a></li>  
</ul>

フッター.php

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
$(function(){ // DOM Ready (shorthand)

    window.onpopstate = function(e) {
        if(e.state){
            $("#content").html( e.state.html );
            document.title = e.state.pageTitle;
        }
    };

  $('#nav a').click(function(e) {
  
      e.preventDefault();                // prevent default anchor behavior
      var URL = $(this).attr('href');    // get page URL
      $('#page').html('');               // empty old HTML content.
      // Target URL and get the #content element
      // and put it into #page of this page
      $('#page').load(URL +' #content', function(data){
           // Load callback function.
           // Everything here will be performed once the load is done.
           // Put here whatever you need.
           // ...
           
           // Also, let's handle history and  browser's AddressBar
            var $data     = $(data),
                content   = $data.find('#content').html(),
                pageTitle = $data.find('h1').text();
            window.history.pushState({"html":content, "pageTitle": pageTitle},"", URL );
      });
      
  });
});
</script>

</body>
</html>

必要なのは、コンテンツを含むページだけです。

index.php

<?php include 'header.php'; ?> <!-- header has menu.html -->
<div id="page">
    <div id="content">
         <h1>WELCOME!</h1>
         <p>Article here...</p>
    </div>
</div>
<?php include 'footer.php'; ?>

foo.php

<?php include 'header.php'; ?> <!-- header has menu.html -->
<div id="page">
    <div id="content">
         <h1>FOO!</h1>
         <p>Foo Article here...</p>
    </div>
</div>
<?php include 'footer.php'; ?>

bar.php

<?php include 'header.php'; ?> <!-- header has menu.html -->
<div id="page">
    <div id="content">
         <h1>BAR!</h1>
         <p>Bar Article here...</p>
    </div>
</div>
<?php include 'footer.php'; ?>

ドキュメント:
http://php.net/manual/en/function.include.php
http://api.jquery.com
http://api.jquery.com/load/
http://api.jquery.com/ find/
http://api.jquery.com/html/
https://developer.mozilla.org/en-US/docs/Web/API/window.onpopstate
https://developer.mozilla.org/en-US /docs/Web/Guide/DOM/Manipulating_the_browser_history

于 2013-09-02T13:24:15.977 に答える
0

@LazyBrain : 次に、ID をいじる必要があります。例えば：

<ul>
<li><a href="#questions">Questions</a></li>
<li><a href="#tags">Tags</a></li>
<li><a href="#answer">Answers</a></li>
</ul>

<div id="questions">
....................
put your content for question page here


</div>
于 2013-09-02T10:28:50.007 に答える
0

これはあなたが探しているものだと思います。ハイパーリンク参照 ( )を同じページanchor tagに設定する方法を示すために、html ページを作成しました。href

これを試して

<html>
  <body>
  <a href="#footer">Go to footer</a>
    <div><a id="header">Your Header</a></div>
    <div style="height:900px;"></div>
    <div><a id="footer">Your Footer</a></div>
    <a href="#header">Go to Header</a>
</body>
</html>

アップデート

最後に、すべてのページで同じフッターとヘッダーを使用したいという問題が発生しました...そうですか??

実際に、既に設計されたファイルを使用できるようにするコードを探していPHPます。include()したがって、php関数を使用するだけで済みます

構文：

ヘッダー セクションの前に

<?php include 'header.php'; ?>

フッターセクションの前に

<?php include 'footer.php'; ?>

ノート：

使用することもできます<?php require 'header.php'; ?>

ただし、ヘッダー ファイルとフッター ファイルが見つからない場合は、エラーが発生する可能性があります。

于 2013-09-02T09:58:08.800 に答える