Question

我制定了一份有13个问题的调查表。所有问题都只出现在一个页面中，但我想一次只显示3个问题，然后在下一页显示其他3个问题。

我不知道怎么做。请在这个问题上帮助我。感谢

Answer 1

使用CSS检查选择器 创建选项卡容器注意：输入必须放在div容器

之前

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta charset="utf-8" />
  <title>Tabs</title>
  <style type="text/css">
    input:checked + div {display:block;}
    .nod{display: none;}
    label{display:inline-grid; border: solid 2px black; }
  </style>
</head>
<body>
  <p>Select one section</p>
  <label for="select1">Section 1</label>
  <label for="select2">Section 2</label>
  <label for="select3">Section 3</label>
  <input type="radio" name="tab" id="select1" class="nod" checked="checked" />
  <div id="tab1" class="nod">Text of 1<br />bla bla bla ...</div>
  <input type="radio" name="tab" id="select2" class="nod" />
  <div id="tab2" class="nod">Text of 2<br />ipsem something</div>
  <input type="radio" name="tab" id="select3" class="nod" />
  <div id="tab3" class="nod">Text of 3<br />Eat that you can and can that you cannot</div>
</body>
</html>

Answer 2

此代码将仅显示三个项目，并在单击“下一步按钮”时显示下三个项目。

var currentPage = 0;
var pages = 5;
var itemsPerPage = 3;
var $submitButton = $("button[type=submit]");
$("li h3").each(function(i, e){
   $(e).text((i + 1) + ") " + $(e).text());
});

$("#next").click(function() {
  $("li")
    //.css("background", "#FFF")
    .hide();
  for(i = 1; i <= itemsPerPage; i++) {
       $("li:nth-child(" + ((currentPage * itemsPerPage) + i) + ")")
       //.css("background" , "red")
       .show();  
  }
   if(currentPage == pages - 1) {
       $submitButton.show();
   }  else {
       $submitButton.hide();
   }
  if(currentPage < pages - 1) {
     currentPage += 1;  
  } else {
    currentPage = 0;
  }

});

$("#next").click();

Example on CodePen

如何制作表格一次显示3个问题

2 个答案: