在按钮上单击“引用不同的html文件”


On Button Click Reference a Different html file

我已经搜索了几个小时,可能是因为我的java知识有限,我有点困了。。

我正在开发一个网站,我想让事情尽可能容易地改变。我希望用户加载主页,然后点击不同的按钮,页面的html"主要内容"会相应地改变。

我的理由是,我想保持一切都非常干净和简单,这样,如果我想更新索引页面的格式,我只需要更新一个页面。。

我想我需要java。。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prodigy Doo Design</title>
<link href="template/style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<?php include('template/header.php'); ?>
<div class="pad50px900wide"><!--Padding after headder--></div>
<?php include('template/nav.php'); ?>
<!--*****************************
********* BODY CONTENT***********
******************************-->
<div class="bodyContent"><?php include('text.html'); ?></div>
<!--*****************************
******END OF BODY CONTENT********
******************************-->
<?php include('template/footer.php'); ?>
</body>

"身体内容"部分是我想要改变的部分。。我想我可以说:

如果主页按钮点击->包括‘home.html’

如果是about按钮,请单击->包含"about.html"。。。…

我只是不知道如何将其转化为代码。。

你可以在这里查看到目前为止我得到的东西http://pddtest.webuda.com/(如果你不知道,当你在大多数浏览器中显示网站的源代码时,它会加载参考文件,就好像它们一开始就在一起一样,所以可能更容易理解我想做什么)

对不起,如果我有点含糊,任何帮助都会非常感激,我已经在互联网上爬了很长时间了,我知道这可能是一个相当简单的

我认为您试图实现的是一个基本模板,其中只有主要内容发生了更改。这意味着编辑基本模板(或者页面,如果你想调用它的话),编辑所有其他页面。

为此,您只需要一些基本的PHP,在那里您可以在GET变量中发送文件名和响应。

<a href="index.php?file=about">About</a>

无论您的include在哪里,您只需将此变量添加到php扩展中:

<?php include ($file.".php"); ?>

当然,不要忘记检查变量是否在请求中。这是一种非常基本的方法,可能不安全,但它是基本php的一个很好的应用程序。

希望这会有所帮助。

您已经包含了PHP,这意味着您正在减少对页面所需的更新量,并且更改页眉、页脚等内容将改变整个网站。

最好只是有单独的页面,即index.php、about.php(您的页面必须是.php而不是.html,因为您在页面中使用php进行包含),并使用常规链接链接到这些页面。

这种方法也会更好的搜索引擎优化。

如果你真的想按照你最初所说的方式来做,你可以使用jQueryload()方法。

更多信息请点击此处:http://api.jquery.com/load/

我认为您需要了解javascript、HTML和PHP的基本知识;通过这种方式,你应该能够自己完成这项工作,并成为一名更好的开发人员。

Javascript是客户端脚本。这意味着您的javascript代码由用户的浏览器解释。当某些浏览器对javascript的解释不同时,这可能会导致问题。

PHP是服务器端脚本。无论用户从哪个浏览器浏览,它的行为都是一样的。只要传入相同的数据,函数就会以一致的方式运行。它向客户端发送HTML(或其他数据,但这有点高级)。

HTML是标记。它所做的只是告诉浏览器如何显示从服务器返回的数据。

将这三者结合起来,你会更好地了解它们是如何相互作用的。如果页面上的某些内容在后台可以是"动态的",但在用户查看后是静态的(不变的),请使用PHP。如果某些内容依赖于用户输入来动态更改而不刷新页面,则需要实现某种javascript。

有多种方法可以实现这一点,这里有3种不重新加载index.html:的简单方法

  • 使用iFrame:使index.html包含所有按钮和一个名为PageContent的iFrame单击每个按钮时调用一个JS函数将PageContent的src属性更改为相关的html
  • 使用客户端JS:使index.html包含所有按钮。ALso将所有相关页面的内容包含到隐藏的DIV中。单击每个按钮时,隐藏所有其他"选项DIVS",只显示相关的DIVS
  • 使用AJAX:使index.html包含所有按钮和一个名为PageContent的DIV。点击每个按钮时调用一个JS函数点击服务器,获取链接到按钮,并使用innerHTML将其渲染到DIV中