从导航栏链接（内部 php / html 文件）到同一页面内的主要部分答案

【问题标题】：Link (internal php / html file) from navigation bar to main section within the same page从导航栏链接（内部 php / html 文件）到同一页面内的主要部分
【发布时间】：2020-04-17 08:51:04
【问题描述】：

我对@987654323@ 还很陌生。我正在尝试复制/模仿我们在工作中使用的内部网站，当前的代码很旧（例如仍在使用框架）。

目前，我一直在尝试打开从导航栏到同一页面主要部分的链接（内部 php / html 文件）。我想我找到了一种使用 php 中包含语法的解决方法，用 css 隐藏所有页面，只显示你点击的那个。但是我很快发现这在我的情况下不起作用，因为当您在浏览器中打开 index.php 时，每个 .php 或 .html 都会在后台加载。我们的内部网站使用了很多不同的 .php 文件，所以我认为加载时间不是最佳的。

我想要实现的目标：仅在导航栏中单击时加载 .php 或 .html 链接，并在同一页面的主要部分中打开它。

有人能解决我的问题吗？提前致谢！

我想要达到的目标：

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
  max-height: 100%;
  font-family: Sans-serif;
  line-height: 1.5em;
}

#header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  overflow: hidden;
  /* Disables scrollbars on the header frame. To enable scrollbars, change "hidden" to "scroll" */
  background: #4B84CF;
  background-image: url(./images/headerbackground.jpg);
  background-position: right top;
  background-size: 30%;
  background-repeat: no-repeat;
}

#nav {
  position: absolute;
  top: 150px;
  /* Set this to the height of the header */
  left: 0;
  bottom: 0;
  width: 230px;
  overflow: auto;
  /* Scrollbars will appear on this frame only when there's enough content to require scrolling. To disable scrollbars, change to "hidden", or use "scroll" to enable permanent scrollbars */
  background: rgb(75, 132, 207);
  background: linear-gradient(90deg, rgba(75, 132, 207, 1) 70%, rgba(75, 132, 207, 0.7567401960784313) 85%);
}

#logo {
  padding: 10px;
}

main {
  position: fixed;
  top: 150px;
  /* Set this to the height of the header */
  left: 230px;
  right: 0;
  bottom: 0;
  overflow: auto;
  background: #ffffff;
}

.innertube {
  margin: 15px;
  /* Provides padding for the content */
}

p {
  color: #555;
}

nav h1 {
  list-style-type: none;
  margin: 5;
  padding: 5px;
  border: 4px solid#C33C54;
  border-radius: 10px;
  color: white;
  font-size: 100%;
  text-shadow: 4px 4px 4px #c33c54;
  text-align: center;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}

nav ul {
  list-style-type: none;
  margin: 5;
  padding: 5px;
  border: 4px solid#C33C54;
  border-radius: 10px;
  color: white;
  font-size: 100%;
  text-shadow: 4px 4px 4px #c33c54;
  text-align: center;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
  text-decoration: none;
}

nav ul a {
  list-style-type: none;
  margin: 5;
  padding: 5px;
  color: white;
  font-size: 100%;
  text-shadow: 4px 4px 4px #c33c54;
  text-align: center;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
  text-decoration: none;
}


/*IE6 fix*/

* html body {
  padding: 100px 0 0 230px;
  /* Set the first value to the height of the header and last value to the width of the nav */
}

* html main {
  height: 100%;
  width: 100%;
}


/* This hides all pages */

.page {
  display: none;
}


/* This displays the first page */

.default {
  display: block;
}


/* This displays the page corresponding to the one you clicked on */

:target {
  display: block;
}


/* This hides the default page when another page is clicked */

:target~.default {
  display: none;
}

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="index_style.css">

<head>
  <title>Test index-pagina</title>
</head>

<body>

  <header id="header">
    <div id="clock">
      <?php include ('clock.php');?>
    </div>
  </header>

  <main>
    <div class="innertube">
      <div id="navtest" class="page">
        <?php include ('navtest.php');?>
      </div>
      <div id="welkom" class="page">
        <?php include ('welkom.php');?>
      </div>
      <div id="about" class="page">
        <?php include ('about.html');?>
      </div>
    </div>
  </main>

  <nav id="nav">
    <div class="innertube">
      <h1>Navigation bar 1</h1>
      <ul>
        <li><a href="#navtest">Navtest</a></li>
        <li><a href="#welkom">Welkom</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
      </ul>

      <h1>Navigation bar 2</h1>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
      </ul>
    </div>
  </nav>

</body>

</html>

【问题讨论】：

标签： javascript php jquery html css

【解决方案1】：

您可以使用 JavaScript 找出单击了哪个按钮，并使用 jQuery 的 load() 函数在您的页面元素上呈现 php 内容。

只需向您的li 元素添加一个数据集属性，例如data-page，然后向该数据页属性添加一个唯一的 ID 或名称。我建议您使用要加载的页面的文件名，以便稍后加载它，您将在下面的示例 sn-p 中看到。

您现在可以使用 JavaScript 检索该数据集值，将其与 .php 扩展名连接，然后使用 jQuery 的 load() 函数将内容呈现到页面。

检查并运行以下代码片段或打开此JSFiddle 以获取上述方法的实际示例：

const links = document.querySelectorAll("#nav li a");

links.forEach( function(e) {
    e.addEventListener("click", function() {
    let goToPage = e.dataset.page;
    $("#page").load(goToPage + ".php");
  });
  
})

<main>
    <div class="innertube">
      <div id="page">
          <!-- Content will be shown here -->
      </div>
    </div>
  </main>

  <nav id="nav">
    <div class="innertube">
      <h1>Navigation</h1>
      <ul>
        <li><a data-page="navtest">Navtest</a></li>
        <li><a data-page="welkom">Welkom</a></li>
        <li><a data-page="about">About</a></li>
        <li><a data-page="somePage1">Link 4</a></li>
        <li><a data-page="somePage2">Link 5</a></li>
      </ul>
    </div>
  </nav>

【讨论】：

非常感谢您的回答！还有一个问题，你把 Javascript 放在哪里？我试过把它放在 index.php 的头部和正文中，但我似乎无法让它工作。再次感谢！
您可以将它添加到脚本标签<script>CODE HERE</script> 中，然后将脚本放在结束正文标签</body> 的正上方。
感谢您的快速回复，再次尝试...仍然无法正常工作。我什至从一个完全空的 index.php 开始，没有任何 CSS 或额外代码。
由于您添加了 jQuery 标签，我已经编辑了解决方案并使用 jQuery load() 函数添加内容，而不使用 php_inlcude。只要确保在加载我们上面编写的脚本之前加载你的 jQery，因为自定义脚本依赖于 jQuery。
新年快乐！！