javascript - 如何在 html css 技巧中单击按钮时显示和隐藏 div？

Question

我有响应式 Html 网站

我想在简单的 html 中隐藏并在单击下一步时显示

DEMO PAGE

Q1.WHAT IS YOUR NAME
ANS - JAMES

Q2.WHAT IS YOUR ADDRESS
ANS- PUNE

这里Q1和Q2在同一个页面但是

我想一次只显示一个问题，但不想创建多个物理页面。

我尝试使用 css 的隐藏和显示技巧，但我想在简单的 html 按钮上执行此操作，单击 NEXT

想要输出如下

Q1.WHAT IS YOUR NAME
ANS- JAMES

[CLICK NEXT]

它将在同一页面上加载 Q2。

我尝试不使用像下面这样的不同页面的一个页面。

<link rel='stylesheet' type='text/css' href='css/style.css' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
    <script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
    <script type='text/javascript' src='js/dynamicpage.js'></script>
      <nav>
              <ul class="group">
                  <li><a href="Q1.html">Q1</a></li>
                  <li><a href="Q2.html">Q2</a></li>

              </ul>
          </nav>
<section id="main-content">
        <div id="guts">
Q1.WHAT IS YOUR NAME
ANS - JAMES
</div>
        </section>

Answer 1

只需使用 Javascript，您就可以相当轻松地做到这一点。这样的事情应该有效:

HTML

<label id="name">What is your name?<input type="text" /></label>
</br>
<label id="address">What is your address?<input type="text" /></label>
</br>
<button id="next">Next</button>

CSS

#address {
  display: none;
}

Javascript

document.getElementById('next').onclick=function(){
    document.getElementById('address').style.display='block';
};

这是一个 fiddle :http://jsfiddle.net/YJRbE/

或者，如果您更喜欢使用 jQuery，则如下所示:

$('#next').on('click', function() {
    $('#address').show();
});

这是 jQuery 版本的 fiddle :http://jsfiddle.net/XyNXq/