如何使用JavaScript修復“上一個按鈕”的問題

Question

我正在“模仿”重力形式。 我正在使用我的表單的前一個按鈕。 我知道解決問題的最好方法是通過'告訴'函數當前div的id（顯示：塊），但我不知道如何。

在代碼的第一部分中，我根據標簽選擇的選定選項顯示或隱藏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/