更新

Question

我有一个用ul和li元素制作的菜单我在点击其中一个li时使用href打开一个页面，问题是我想在主文件的同一页面中打开包含href的页面，因为我有一个页脚和一个标题。

Answer 1

一种简单的方法和没有页面刷新是使用 AJAX 技术和 JS （+只是一点点） jQuery ）

搜索引擎友好的AJAX驱动网站：

基本示例：

<强>的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>

<强> footer.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

Answer 2

通过阅读帖子，您需要做的是将页眉和页脚放在各自独立的文件中。

在所有页面上都包含您想要的页眉和页脚，因此当您打开新页面时，页眉和页脚将在所有页面中相同。

菜单相同。将它放在自己的文件中并将其包含在每个页面中。然后它在每个页面上始终相同，您只需要更新一个文件。

Answer 3

我相信这就是您要找的内容，我已经为您编写了一个html页面，以演示如何使用anchor tag来设置超链接引用（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文件的代码。所以你只需要使用php include()函数

<强>语法：

在标题部分之前

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

在页脚部分之前

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

注意：

您也可以使用<?php require 'header.php'; ?>

但如果您的页眉和页脚文件丢失，这可能会产生错误。

Answer 4

@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>

Answer 5

如果您在href中使用目标属性，请将其取出，然后在同一窗口中打开链接。

e.g。

<a href="page.html" target="_blank">Click Here</a> - New window

应该是

<a href="page.html">Click Here</a> - Current window

我想点击菜单元素时用href打开当前页面中的页面

5 个答案:

搜索引擎友好的AJAX驱动网站：

更新

注意：