个人中心
gpt4 book ai didi

javascript - 从导航栏到同一页面内主要部分的链接(内部 php/html 文件)

转载 作者：行者123 更新时间：2023-12-01 01:21:17 24 4
gpt4 key购买 nike

我对 PHP/HTML/CSS 还很陌生。我正在尝试复制/模仿我们在工作中使用的内部网站，当前代码相当旧(例如仍然使用框架)。

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

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

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

我想要实现的目标:

enter image description here 

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来找出哪个按钮被点击，使用了jQuery的load()函数在页面元素上呈现 php 内容。

只需向 li 元素添加一个数据集属性(例如 data-page)，然后向该数据页属性添加唯一的 ID 或名称。我建议您使用要加载的页面的文件名，这样以后加载会更容易，正如您将在下面的示例代码片段中看到的那样。

您现在可以使用 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 - 从导航栏到同一页面内主要部分的链接(内部 php/html 文件)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59499815/

24 4 0
文章推荐： javascript - rxjs Observable 相对于 DOM 事件有什么优点？
文章推荐： csv - 通过打印每列中出现的前 5 个数据元素来增强 awk 脚本
文章推荐： appharbor - 我可以更改 AppHarbor 应用程序的 URL 吗？
文章推荐： google-maps - 检查点是否在多边形( map )中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com