是否可以显示带有 url 的 div？

Question

我使用一些js将注册表单创建为整个网站上方的隐藏div。现在，我想在不同的文件中创建 php 部分。我有3个文件。html，div 在哪里，表单。js文件，隐藏和显示状态之间的切换在哪里，它是通过一个按钮调用的。3.一个是php，if-s（空字段，错误数据等），mysql的东西在哪里。如果用户犯了错误，我想发送回主 html 文件，表单在哪里，url 中包含给定的数据，所以我可以说是什么问题。但是如果我这样做，注册表将被关闭，因为它又是一个 display:none。在我发回用户后，如何从 php 再次设置 div 的显示？对不起，如果它很复杂......

我尝试在php中调用js函数，在我用header函数发回后，但没有奏效。

HTML div：

<div id="reg-Page">

 <!-- Form, and others -->

</div>

调用div：

<button type="button" name="button" onclick="return regForm()">Signup</button>

js函数：

 function regForm() {

  var logWindow = document.getElementById('reg-Page');

  if (logWindow.style.display != 'block') {

    logWindow.style.display = 'block';

  } else {

    logWindow.style.display = 'none';

  }

}

PHP文件：

 if (empty($username) || empty($password) || empty($password2) || empty($email)) {

    ?>

      <script src="js/scripts.js" type="text/javascript">

        return regForm()

      </script>

    <?php

    header("Location: ../index.php?error=emptyfields&uid=".$username."&mail=".$email);

    exit();

  }

在发回后，我尝试再次将 div 显示设置为阻止。

Answer 1

是否可以显示带有 url 的 div？我在上面添加了您的标题，因为我可以帮助您解决这个问题，但我并没有真正理解您的其余问题是什么。您能否通过使您的问题更准确来进一步帮助我们？:target在 CSS 中使用伪元素选择器。通过这种方式，您可以侦听散列或#在 URL 中并选择id与散列匹配的元素。如果可能的话，使用类来隐藏或显示元素以将 HTML 与 CSS 分开。所以添加指定元素状态的CSS（默认、目标和隐藏）。在您的JS 中切换到更改类而不是内联样式属性。如果你这样做，你就会错过一些最好的 CSS 特性。在您的PHP 中，只需添加一个#带有要显示到重定向 URL 的元素的 ID。在你的情况下#reg-Page。HTML<div id="reg-Page">&nbsp;<!-- Form, and others --></div>CSS#reg-Page {&nbsp; display: none;}#reg-Page:target {&nbsp; display: block;&nbsp; /* Set your properties here */}.hidden {&nbsp; display: none;}JSfunction regForm() {&nbsp; var logWindow = document.getElementById('reg-Page');&nbsp; if (!logWindow.classList.contains('hidden')) {&nbsp; &nbsp; logWindow.classList.add('hidden')&nbsp;&nbsp; &nbsp;} else {&nbsp; &nbsp; logWindow.classList.remove('hidden')&nbsp; }}PHP<?php// Add the ID of the div with add # before it at the end of the page.header("Location: ../index.php/?error=emptyfields&uid=".$username."&mail=".$email.'#reg-Page');?>让我知道我是否正确理解了您的问题以及这是否有帮助。

Answer 2

在index.php您可以检查是否一个错误信息被设置到URL并使用该信息以输出比特JS的触发功能，使形成时，页面已准备就绪：<?php if (isset($_GET['error'])): ?>&nbsp; &nbsp; <script type="text/javascript">&nbsp; &nbsp; &nbsp; &nbsp; window.addEventListener("load", regForm);&nbsp; &nbsp; </script><?php endif; ?>

Answer 3

我尝试在php中调用js函数，在我用header函数发回后，但没有奏效。这最像一个竞争条件。您的服务器正在发送一个 html 文件，其中包含一个 script 标签和一个 div 标签，但哪个首先加载，以及在脚本运行时可以访问 DOM 的哪些部分，使用此方法不清楚。至少你应该这样做：&nbsp; &nbsp; ?>&nbsp; &nbsp; &nbsp; <script src="js/scripts.js" type="text/javascript">&nbsp; &nbsp; &nbsp; &nbsp; $(regForm);&nbsp; &nbsp; &nbsp; </script>&nbsp; &nbsp; <?php假设您有 jQuery，使用$(document).ready() 速记。这里的想法是该函数在 DOM 完成之前不会运行（即浏览器已解析到文档的末尾），然后您的脚本有机会找到它想要取消隐藏的 div。但是，仅供参考，这是一种过时的做事方式。您应该了解有关客户端/服务器编程的更多信息（一些评论者提供了有关此的链接）。我会将系统构建得更像一个单页应用程序，其中服务器有一个 API，客户端可以根据表单发送 xhr 请求，并根据服务器的响应采取行动。这对于您描述的 php/mysql 堆栈是完全可能的。