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';
};

这是一个小提琴：http://jsfiddle.net/YJRbE/

或者，如果您更喜欢使用jQuery，可以这样：

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

这是jQuery版本的小提琴：http://jsfiddle.net/XyNXq/

Answer 2

这里有一些jQuery的例子，它支持两个以上的问题：

尝试将所有问题都包含在div中并使用jquery进行点击事件，因此每次单击该按钮时，都会显示下一个问题。在此方法中，您应该在包装器div中包含所有问题，并将其显示设置为无。

http://jsfiddle.net/ZFZfY/1/

修改：http://jsfiddle.net/ZFZfY/3/

HTML：

  <div class="questionWrapper">
    <div class="question show" id="questionOne">
        <label>foo bar?</label>
       <input type="text">
   </div>
   <div class="question" id="questionTwo" style="display: block;">
      <label>foo bar?</label>
      <input type="text">
    </div>
  </div>
  <a class="NextQuestion" href="#">Next Question</a>

CSS：

.question{ display: none;}
.show{ display: block;}

jQuery的：

$('.NextQuestion').click(function(e){
  e.preventDefault();
  loadNext();
});

$('.PrevQuestion').click(function(e){
  e.preventDefault();
  loadPrev();
});

function loadNext(){
  // loop to verify what is visible
   $('.questionWrapper').children().each(function(i){
      if($(this).css('display') === 'block' && $(this).next().length > 0){
        $(this).css('display','none');
           $(this).next().fadeIn();
        return false;
      }
    });
}

function loadPrev(){
  // loop to verify what is visible
   $('.questionWrapper').children().each(function(i){
      if($(this).css('display') === 'block' && $(this).prev().length > 0){
            $(this).css('display','none');
            $(this).prev().fadeIn();
        return false;
      }
    });
}

Answer 3

这是脚本

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script>

            <script type="text/javascript">


                 $(document).ready(function() {
                    $('.content').each(function() { 
                      var $this = $(this);
                      $this.find(':not(.col:first,.active)').hide();
                      $('.col').children().removeAttr('style');
                    });
                    $("#add").click(function() {
                       $(".col:hidden:first").show("slow");
                       $('.col').prev().hide();
                    });
                });
            </script>

这里演示html

<div class="content">
        <div class="col">
            <h3>What Is Your Name</h3>
            <input type="text">
        </div>
        <div class="col">
            <h3>What Is Address</h3>
            <input type="text">
        </div>
        <button id="add" class="active">Add</button>
    </div>

Answer 4

希望这有帮助。

您可以像这样更改按钮点击元素的可见性。

document.getElementById('name').style.display='none';
document.getElementById('address').style.display='block';

以下是working demo

如何在html css技巧中按钮点击显示和隐藏div？

4 个答案: