是否可以显示带有 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">

 <!-- Form, and others -->

</div>

CSS

#reg-Page {

  display: none;

}

#reg-Page:target {

  display: block;

  /* Set your properties here */

}

.hidden {

  display: none;

}

JS

function regForm() {

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

  if (!logWindow.classList.contains('hidden')) {

    logWindow.classList.add('hidden') 

   } else {

    logWindow.classList.remove('hidden')

  }

}

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'])): ?>

    <script type="text/javascript">

        window.addEventListener("load", regForm);

    </script>

<?php endif; ?>

Answer 3

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

这最像一个竞争条件。您的服务器正在发送一个 html 文件，其中包含一个 script 标签和一个 div 标签，但哪个首先加载，以及在脚本运行时可以访问 DOM 的哪些部分，使用此方法不清楚。至少你应该这样做：

    ?>

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

        $(regForm);

      </script>

    <?php

假设您有 jQuery，使用$(document).ready() 速记。这里的想法是该函数在 DOM 完成之前不会运行（即浏览器已解析到文档的末尾），然后您的脚本有机会找到它想要取消隐藏的 div。

但是，仅供参考，这是一种过时的做事方式。您应该了解有关客户端/服务器编程的更多信息（一些评论者提供了有关此的链接）。我会将系统构建得更像一个单页应用程序，其中服务器有一个 API，客户端可以根据表单发送 xhr 请求，并根据服务器的响应采取行动。这对于您描述的 php/mysql 堆栈是完全可能的。