Question

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

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

编辑：

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

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

＆＃13;

...
var bgBlueChannel = 255;


//****************************************************
// for ColorThief - remove code block to disable
img.src = src;
img.addEventListener('load', function() {
  // this = the img element
  console.log(this.width); // will now give the correct width
  bgColor = colorThief.getColor(this);
  bgRedChannel = bgColor[0];
  bgGreenChannel = bgColor[1];
  bgBlueChannel = bgColor[2];

  // creates the CSS rules for each highlight
  createHighlightCSS(myStyle, idNumber, bgRedChannel, bgGreenChannel, bgBlueChannel);

  // creates the unique containers for each highlight
  html += `<div id="highlight${idNumber}">`;
  html += `<a href="${href}"><img src="${this.src}" alt="${title}" ></a>`;
  html += `<div id="highlight${idNumber}-title">${title}</div>`;
  html += `<div id="highlight${idNumber}-desc">${desc}</div>`;
  html += `</div>\n`
  document.getElementById("highlights-container").insertAdjacentHTML("beforeend", html);
});

...

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

1 个答案: