3

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

4

5 回答 5

2

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

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

基本示例：

头文件.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'; ?>

菜单.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>

您需要的只是包含以下内容的页面：

索引.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'; ?>

酒吧.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/查找/
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

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

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

菜单也一样。把它放在自己的文件中，并包含在每个页面中。那么它在每一页上总是相同的，你只需要更新一个文件。

于 2013-09-02T09:51:16.087 回答
0

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

例如

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

应该

<a href="page.html">Click Here</a> - Current window
于 2013-09-02T10:29:49.223 回答
0

我相信这就是您正在寻找的，我已经为您编写了一个 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文件的代码。所以你只需要使用phpinclude()函数

句法：

在您的标题部分之前

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

在您的页脚部分之前

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

笔记：

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

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

于 2013-09-02T09:58:08.800 回答
0

@LazyBrain：那么你只需要玩 id's。例如：

<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 回答