Question

我正在“模仿”重力形式。我正在为表单使用上一个按钮。我知道解决问题的最佳方法是通过“告诉”函数当前div的ID（显示：块），但我不知道如何。

在代码的第一部分中，我根据标签select的所选选项显示或隐藏div，现在，在第二部分中是配置“上一个按钮”的地方。

 <script>
            function yesnoCheck(that) {
            if (that.value == "2") {

            document.getElementById("b").style.display = "block";
            document.getElementById("a").style.display = "none";
            <?php $new="b" ?> 
            } else {
            document.getElementById("a").style.display = "none";
            document.getElementById("d").style.display = "block";
            }
            }
            </script>
               <script>
            function yesnoCheck2(that) {
            if (that.value != " ") {

            document.getElementById("c").style.display = "block";
            document.getElementById("a").style.display = "none";
            document.getElementById("b").style.display = "none";
            <?php $new="c" ?>
            } else {
            document.getElementById("a").style.display = "none";
            }
            }
            </script>
               <script>
            function yesnoCheck3(that) {
            if (that.value != " ") {

            document.getElementById("d").style.display = "block";
            document.getElementById("c").style.display = "none";
            <?php $new="f" ?>

            } else {
            document.getElementById("c").style.display = "none";
            }
            }
            </script>

             <script>
            function yesnoCheck4(that) {
            if (that.value.length == 8) {

            document.getElementById("tform").style.display = "block";

            } else {
            document.getElementById("tform").style.display = "none";
            }
            }
            </script>

Answer 1

尚不清楚您要做什么，但是我认为您想做的是浏览表单中的一组部分，就像它们是不同的页面一样。

一种非常简单的方法是使用:target CSS选择器，该选择器使您可以选择与当前页面的锚片段ID匹配的元素。例如，如果我有一个ID为main的部分，并且URL类似于https://example.com/#main，则可以使用section:target来显示该部分。

这是您的完整示例。 HTML：

<section id="one">
  <h1>Section 1</h1>
  <p>
    This is section one.  Content goes here.
  </p>
  <a href="#two" class="button">Next</a>
</section>

<section id="two">
  <h1>Section 2</h1>
  <p>
    This is section two.  More content goes here.
  </p>
  <a href="#one" class="button">Previous</a>
  <a href="#three" class="button">Next</a>
</section>

<section id="three">
  <h1>Section 3</h1>
  <p>
    This is the last section.
  </p>
  <a href="#two" class="button">Previous</a>
</section>

CSS：

.button {
  background: #333;
  color: #fff;
  text-decoration: none;
  padding: 0.5em 1em;
  border-radius: 0.3em;
}

section {
  display: none;
}

section:target {
  display: block;
}

最后，一些JavaScript可以初始化事物：

// Default to the first section
if (!location.hash.substr(1)) {
  location.hash = 'one';
}

这些按钮只是通过定位片段链接到下一部分的内容。

此示例在JSFiddle上发布：https://jsfiddle.net/91pnc3gf/

如何使用JavaScript解决“上一个按钮”的问题

1 个答案: