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

【问题标题】：Is it possible to show a div with an url?是否可以显示带有 url 的 div？
【发布时间】：2019-08-17 05:26:32
【问题描述】：

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

【问题讨论】：

What is the difference between client-side and server-side programming?的可能重复

标签： javascript php html

【解决方案1】：

我尝试在php中调用js函数，在我用header函数发送回来后，它不起作用。

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

    ?>
      <script src="js/scripts.js" type="text/javascript">
        $(regForm);
      </script>
    <?php

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

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

【讨论】：

【解决方案2】：

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

我在上面添加了您的标题，因为我可以帮助您解决这个问题，但并没有真正理解您的其余问题是什么。您能否通过使您的问题更精确来进一步帮助我们？

在 CSS 中使用 :target 伪元素选择器。这样您就可以在 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;
}

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');
?>

让我知道我是否正确理解了您的问题以及这是否有帮助。

【讨论】：

【解决方案3】：

在index.php 中，您可以检查是否在 URL 中设置了错误消息，并使用该信息输出一些 JS 以触发功能，以便在页面准备好时启用表单：

<?php if (isset($_GET['error'])): ?>
    <script type="text/javascript">
        window.addEventListener("load", regForm);
    </script>
<?php endif; ?>

【讨论】：