将（内部 php / html 文件）从导航栏链接到同一页面内的主要部分
[英]Link (internal php / html file) from navigation bar to main section within the same page
问题描述
我对PHP / HTML / CSS 。 我正在尝试复制/模仿我们在工作中使用的内部网站，当前的代码很旧（例如仍在使用框架）。
目前，我一直在尝试打开从导航栏到同一页面主要部分的链接（内部 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>
1 个解决方案
解决方案1
2 已采纳 2019-12-27 11:40:29
您可以使用 JavaScript 找出点击了哪个按钮，并使用 jQuery 的load()函数在页面元素上呈现 php 内容。
只需将数据集属性添加到您的li元素，例如data-page并为该 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>
当用户单击内部链接时显示html页面的一部分
[英]Displaying a section of a html page when a user clicks on the internal link
使用 javascript 和/或 php 将当前 url 的一部分显示为同一页面中的链接
[英]show a section of the current url as link in the same page using javascript and/or php
为什么 Javascript 文件链接在我的主 HTML 页面中不起作用？
[英]Why is the Javascript file link not working in my main HTML page?
如何在 html 中创建一个按钮链接，它将带您到同一页面的不同部分
[英]How to create a button link in html which will take you to a different section of the same page
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.