时间戳

首页 > 解决方案 > 尝试通过单击菜单更改页面内容

javascript - 尝试通过单击菜单更改页面内容

问题描述

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

这就是这个简单网站的样子以及我想做的事情

编辑：

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

<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>

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

<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>

标签： javascriptphphtmlcssweb

解决方案

在使用 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>

推荐阅读