Question

我正在尝试编写一个“页面”，它会向用户询问是/否答案的问题。如果他们回答“是”，如果他们回答“否”，将显示新的“页面”，将显示不同的“页面”。总共会有6个不同的“页面”。

我将在div中加载所有“页面”并隐藏除第一个之外的所有页面。

我不确定从哪里开始使用JS Code，我应该为每个页面编写show / hide代码，还是可以组合在一个案例0：case 1类型函数中？

.page { display:none; width:100%; }
#p1 {display: inline-block;}

<div id="lpage"> 


<section class="page" id="p1">
<h1>This is Page 1</h1>
<div class="yes">Yes</div>
<div class="no">No</div>
</section>

<section class="page" id="p2">
<h1>This is Page 2</h1>
<div class="yes">Yes</div>
<div class="no">No</div>
</section>

<section class="page" id="p3">
<h1>This is Page 3</h1>
<div class="yes">Yes</div>
<div class="no">No</div>
</section>

<section class="page" id="p4">
<h1>This is Page4</h1>
<div class="yes">Yes</div>
<div class="no">No</div>
</section>

<section class="page" id="p5">
<h1>This is Page 5</h1>
<div class="yes">Yes</div>
<div class="no">No</div>
</section>

<section class="page" id="p6">
<h1>This is Page 6</h1>
<div class="yes">Yes</div>
<div class="no">No</div>
</section>

</div>

Answer 1

如果您使用jquery（我推荐的），您可以为此功能创建一个简单的函数：

function showPage(id) {
$('section.page').hide();
$('#p'+id).show();
}

//show page 3
showPage(3);

Answer 2

使用JQuery尝试这样的事情：

$(".yes").click(function() {
  var parentSectionId = $(this).parent(".page").attr('id');

  if(parentSectionID == "p1") {
     $("#p2").hide();
     $("#p4").hide();
     $("#p3").show();
  }

  if(parentSectionID = "p2") {
     ...
  }

等等。然后在单独的单击函数中处理无案例，只需用no替换yes。

根据点击显示隐藏分区

2 个答案: