Javascript 将单选按钮问题分段显示为HTML/JS页面的选项卡

我已经做了一个调查，但调查的问题一个接一个地来了。我想把它们放在一个标签的分区中，这样它们看起来就不错了。是否有任何引导组件或任何其他我可以使用的，以便调查问题看起来更好的方式可能是一个标签或其他东西。添加图片以提供更清晰的信息

Html页面：-

    <p>
  Select a radio button and click on Submit.
</p>
<div class="section-1">

  <h2>Section 1</h2>
  question 1:
  <input type="radio" name="question1" value="1">1
  <input type="radio" name="question1" value="2">2
  <input type="radio" name="question1" value="3">3

  <br> question 2:
  <input type="radio" name="question2" value="1">1
  <input type="radio" name="question2" value="2">2
  <input type="radio" name="question2" value="3">3

  <br> question 3:
  <input type="radio" name="question3" value="1">1
  <input type="radio" name="question3" value="2">2
  <input type="radio" name="question3" value="3">3

</div>
<div class="section-2">

  <h2>Section 2</h2>
  question 1:
  <input type="radio" name="question4" value="1">1
  <input type="radio" name="question4" value="2">2
  <input type="radio" name="question4" value="3">3

  <br> question 2:
  <input type="radio" name="question5" value="1">1
  <input type="radio" name="question5" value="2">2
  <input type="radio" name="question5" value="3">3
  <br> question 3:
  <input type="radio" name="question6" value="1">1
  <input type="radio" name="question6" value="2">2
  <input type="radio" name="question6" value="3">3
  <br> question 4:
  <input type="radio" name="question7" value="1">1
  <input type="radio" name="question7" value="2">2
  <input type="radio" name="question7" value="3">3
</div>
<br>

<div class="final-results"></div>
<br>

<button type="button" onclick="displayRadioValue()">
      Submit
     </button>

<div id="control" style="display: none"><a id="toemail" href="mailto:youremail@domain.com?subject=Survey response&body=">Send to   
      email</a>&nbsp<button onclick="window.print();">Send to PDF</button></div>

样式页：-

    @media print {
  body * {
    visibility: hidden;
  }
  .final-results * {
    visibility: visible;
  }
  .final-results {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
}

table,
table tr th,
table tr td {
  border: 1px solid black;
}

---

本bootstrap官方文档中有一个名为Pills的部分，它可能会帮助您找到相关链接，您可以使用bootstrap JS选项卡

<ul class="nav nav-tabs">
   <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#section1">section 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#section2">section 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#section3">section 3</a>
      </li>
    </ul>
    
    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane active container" id="section1">...</div>
      <div class="tab-pane container" id="section2">...</div>
      <div class="tab-pane container" id="section3">...</div>
    </div>

...
...
...

---

参见标题部分中的请添加：

---

以下是供您使用的完整代码。我正在使用

引导

和

选项卡部分

类来获得所需的

结果

此外，我还创建了每个问题的
字段集
，以便您可以轻松地执行一些
CSS
，并根据需要自定义HTML，或稍后向其添加更多问题

我添加了
results
部分，当从每个部分中选择一个问题时，该部分将显示结果。以及
Send to PD
F和
Send to Email
工作正常

现场工作演示：


函数displayRadioValue（）{
让section1=document.querySelectorAll（'.section-1>input[type=“radio”]”）
让section 2=document.querySelectorAll（'.section-2>input[type=“radio”]”）
设第1节总计=0
设section2Total=0
让section1Question=0
让section2Question=0
让finalResults=document.querySelector（“.final results”）
让result1=''
让result2=''
finalResults.innerHTML=“”
//第一节
第1节forEach（功能（收音机、索引）{
如果（无线电检查）{
第二节问题++
第1节总+=+无线电值
}
})
//第二节
第2节forEach（功能（收音机、索引）{
如果（无线电检查）{
第1节问题++
第2节总+=+无线电值
}
})
//最终结果和验证
如果（第1节总计>0和第2节总计>0）{
finalResults.innerHTML+=genTable（第1部分问题，第1部分总计，1）
finalResults.innerHTML+=genTable（section2Question，section2Total，2）
document.getElementById（“控件”）.style.display=“块”；
document.getElementById（“toemail”）.href+=document.querySelector（“.final results”）.innerText；
}否则{
finalResults.innerHTML='Snap！请从每个部分中选择至少一个调查问题'
}
}
功能表（ques、total、section）{
var result=“Section”+Section+：
”
var tr=“”+总计+”+（（总计/（ques*3））*100）。toFixed（2）+”
结果+=“总分百分比”+tr+“”
返回结果
}
@媒体打印{
正文*{
可见性：隐藏；
}
.最后结果*{
能见度：可见；
}
.最终结果{
位置：绝对位置；
左：0；
排名：0；
右：0；
底部：0；
}
}
桌子
表tr-th，
表tr td{
边框：1px纯黑；
}

调查问题
调查







问题1：
1.
2.
3.
问题2：
1.
2.
3.
问题3：
1.
2.
3.
问题4：
1.
2.
<ul class="nav nav-tabs">
   <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#section1">section 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#section2">section 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#section3">section 3</a>
      </li>
    </ul>
    
    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane active container" id="section1">...</div>
      <div class="tab-pane container" id="section2">...</div>
      <div class="tab-pane container" id="section3">...</div>
    </div>