尝试通过单击菜单更改页面内容答案

【问题标题】：Trying to change page content by menu clicks尝试通过单击菜单更改页面内容
【发布时间】：2018-10-30 10:45:16
【问题描述】：

我正在尝试动态更改页面中的内容，以便在默认页面上我可以通过单击菜单选项来动态更改内容。这对我来说似乎很复杂。我是使用 ONCLICK 方法，还是其他 JavaScript 函数或 PHP？

This is how this simple website looks like and what I want to do

编辑：

这是我到目前为止所做的：

我有一个 CSS 工作正常的文件
我编写了一个 MAIN_PAGE（索引）：

<DOCTYPE html>

<html lang="pt-BR">

<html>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<head>

  <link rel="stylesheet" type="text/css" href="css/Controle_de_estoque.css">

</head>

<!--Site de Controle de Estoque em HMTL
				HOME-->


<title> Controle de Estoque</title>  <!--Título do Site-->


<body>


<div class="container">


<?php
include  ("path to header")

?>

<?php

include  ("path to a HOMEPAGE_DEFAULT file")

?>


</body>

</html>

所以现在我尝试在单击其中一个 MENU 选项（导航）时更改页面内容。

<header>


			CONTROLE DE ESTOQUE

			<img class="imgheader" src="Fotos/Estoque_header.jpg" style="max-width: 70%;height: auto">
</header>

				<nav>
				<a title="Página Inicial" href="index.php"><img src="Fotos/Home.png" style="max-width: 30px;float:center"></a>
				<a title="Estoque" href="paginas/Estoque.html">Estoque</a>
				<a title="Relatórios" href="index.php">Relatórios</a>
				<a title="Configurações" href="index.php">Configurações</a>
				<a title="Acesso Interno" href="index.php">Acessos Internos</a>
				</nav>

<div>
<!--HOME-->
<article>
		<h1> Controle de Estoque </h1>
		<p> Escolha um dos itens no MENU acima para iniciar</p>
		<img class="imgArticle" src="Fotos/Integracao_tecnologia.jpg" style="max-width:40%,height: auto;width: 40% " alt="Integracao_tecnologia" title="Integracao_tecnologia">
</article>
<div>

【问题讨论】：

请阅读How to Ask并确保采取tour
最简单的版本：使用<a href="secondpage.php">Configura..</a>
这一切都取决于...您可以使用 PHP（include 页眉、页脚）和页面刷新或使用 AJAX 动态加载内容...
你能补充一下你目前所做的...
Roko C. Buljan，我正在 w3school 研究 AJAX，但所有示例都显示了那些 javascript 按钮，我希望在单击 CSS 制作按钮时改变它。我不知道我是否只是缺乏知识和逻辑，但我对此很陌生。

标签： javascript php html css web

【解决方案1】：

在使用 php 时，您可以将内容分离到文件中，并使用 if...else,include('fileName.php') 选择性地包含它们并使用 isset('variableName') 检查按钮单击请注意下面的代码未经测试：

    vars.php
    <?php

    $color = 'green';
    $fruit = 'apple';

    ?>

    test.php

    <form name="new user" method="post" action=<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?> > 

    <input type="submit"  value="show"/>
    </form>
    <?php

if (isset($_POST["submit"])) {
include 'vars.php';    
 echo "A $color $fruit";
}else{  
    //code goes here
}

    ?>

根据您的评论进行编辑：

<ul>
                <li><a href="?link=1" name="link1">link 1</a></li>
                <li><a href="?link=2" name="link2">link 2</a></li>
                <li><a href="?link=3" name="link3">link 3</a></li>
                <li><a href="?link=4" name="link4">link 4</a></li>    
            </ul>

       <div id="mainSection">
            <?php
        $link=$_GET['link'];
        if ($link == '1'){
             include 'page1.php';
        }
        if ($link == '2'){
            include 'page2.php';
        }
        if ($link == '3'){
            include 'page3.php';
        }
        if ($link == '4'){
            include 'page4.php';
        }
            ?>  
        </div>

【讨论】：

我想我明白了。所以我应该使用表单方法来做到这一点，然后它会获取我的其他文件来更改网站？我可以将其分配给 Example
中的一个菜单吗？
谢谢！这对我有很大帮助。我不是程序员。我是一名土木工程专业的学生，试图为自己构建解决方案，所以这真的不是我的事。