PHP实现点击导航菜单只改变底下内容模块

作者：嗜血之舞发布日期:2024-08-06 浏览:440

在PHP中，可以使用Ajax来实现点击导航菜单只改变底下内容模块的功能。下面是一个简单的示例代码：

创建一个导航菜单页面（nav.php），其中包含导航菜单项，并为每个菜单项添加一个点击事件，用于发送Ajax请求。

<!-- nav.php -->
<ul>
  <li><a href="#" onclick="loadContent('page1.php')">Page 1</a></li>
  <li><a href="#" onclick="loadContent('page2.php')">Page 2</a></li>
  <li><a href="#" onclick="loadContent('page3.php')">Page 3</a></li>
</ul>

<script>
function loadContent(page) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("content").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", page, true);
  xhttp.send();
}
</script>

创建一个内容模块页面（page1.php、page2.php、page3.php），用于显示不同的内容。

<!-- page1.php -->
<h2>Page 1</h2>
<p>This is page 1 content.</p>

<!-- page2.php -->
<h2>Page 2</h2>
<p>This is page 2 content.</p>

<!-- page3.php -->
<h2>Page 3</h2>
<p>This is page 3 content.</p>

创建一个主页面（index.php），包含导航菜单和内容模块容器。

<!-- index.php -->
<!DOCTYPE html>
<html>
<head>
  <title>Dynamic Content</title>
</head>
<body>
  <?php include 'nav.php'; ?>

  <div id="content">
    <!-- 默认显示的内容 -->
    <?php include 'page1.php'; ?>
  </div>
</body>
</html>

当用户点击导航菜单项时，会通过Ajax请求加载相应的内容模块页面，并将其显示在内容模块容器中。这样，就实现了点击导航菜单只改变底下内容模块的功能。

上一篇：A域名页面调用B域名下的php，php里读写cookies为空，有办法解决吗？多谢

下一篇：php如何循环读取该数据