Question

我有一个下一个按钮和后退按钮。我想一次显示一个问题div。然后我想要下一个按钮将div更改为下一个div问题，后退按钮应该将div更改回前一个div。一次只能看到一个div。

<input type="image" src="forward.gif" alt="Next">
<input type="image" src="back.gif" alt="Back">

<div class="question_one">
<img src ="images/green_question1.png" width="100%" height="100%"></img>
</div>

<div class="question_two">
<img src ="images/green_question2.png" width="100%" height="100%"></img>
</div>

<div class="question_three">
<img src ="images/green_question3.png" width="100%" height="100%"></img>
</div>

<div class="question_four">
<img src ="images/green_question4.png" width="100%" height="100%"></img>
</div>

Answer 1

这是一个解决此类问题的简单JavaScript：

<script>
    var next = document.getElementById('next'),
        back = document.getElementById('back'),
        questions = document.getElementsByTagName('div'),
        current = 0;

    next.onclick = function showNext() {
        if (questions[current+1]) {
            questions[current].style.display = 'none';
            questions[current+1].style.display = 'block';
            current++;
        } else {
            return false;
        }
    }

    back.onclick = function showPrev() {
        if (questions[current-1]) {
            questions[current].style.display = 'none';
            questions[current-1].style.display = 'block';
            current--;
        } else {
            return false;
        }
    }
</script>

首先你应该用CSS隐藏问题（第一个除外）：

<style>
    div:not(:first-of-type) {
        display: none;
    }
</style>

编辑：这是你的HTML ......

<input type="image" src="forward.gif" alt="Next" id="next">
<input type="image" src="back.gif" alt="Back" id="back">

<div class="question_one">
    <img src ="images/green_question1.png" width="100%" height="100%"></img>
</div>

<div class="question_two">
    <img src ="images/green_question2.png" width="100%" height="100%"></img>
</div>

<div class="question_three">
    <img src ="images/green_question3.png" width="100%" height="100%"></img>
</div>

<div class="question_four">
    <img src ="images/green_question4.png" width="100%" height="100%"></img>
</div>

Answer 2

您可以通过组合HTML，CSS和jQuery来实现这一目标。

在下面的示例中，我只显示具有类活动的div元素并隐藏其他div。当用户单击“下一个”或“上一个”按钮时，将类激活添加到适当的div。

HTML代码

<input type="button" value="Next" id="next_qs">
<input type="button" value="Back"  id="prev_qs">

<div class="question_one">
QS1
</div>

<div class="question_two">
QS2
</div>

<div class="question_three">
QS3
</div>

<div class="question_four">
QS4
</div>

CSS代码

div {
    width: 300px; height: 200px; border: 1px solid #333; clear: both; display: none;
}

div.active {
    display: block;
}

jQuery代码

$("div:first").addClass('active')

$("#next_qs").click(function() {
$("div.active").removeClass('active').next().addClass('active');
});

$("#prev_qs").click(function() {
$("div.active").removeClass('active').prev().addClass('active');
});

http://jsfiddle.net/27gwy14f/

Answer 3

首先，使用唯一名称重新组合您的类，并在后退和前进按钮中添加ID（要应用点击事件）。示例：

<input type="image" src="forward.gif" alt="Next" id="forwardQ">
<input type="image" src="back.gif" alt="Back" id="nextQ">
<div class="question">
 <img src ="images/green_question1.png" width="100%" height="100%"></img>
</div>

<div class="question">
 <img src ="images/green_question2.png" width="100%" height="100%"></img>
</div>

<div class="question">
 <img src ="images/green_question3.png" width="100%" height="100%"></img>
</div>

<div class="question">
 <img src ="images/green_question4.png" width="100%" height="100%"></img>
</div>

使用JQuery：

var actual = 0; // select by default the first question

$(document).ready(function() {
 var number_of_question = $('.question').length; // get number of questions

 $('.question:gt(' + actual + ')').hide(); // Hide unselect question
 $('#nextQ').click(function() {
  if(actual < number_of_question - 1 ) {
    changeQuestion(actual + 1); // display select question
  }
 });
 $('#forwardQ').click(function() {
  if(actual) {
    changeQuestion(actual - 1); // display select question
  }
 });
});

function changeQuestion( newQuestion ) {
 $('.question:eq(' + actual +')').hide(); // hide current  question
 $('.question:eq(' + newQuestion +')').show();   // show new question
 actual = newQuestion; // memorize actual selection
}

Answer 4

HTML

<div id="container">
   <input type="image" src="back.gif" alt="Back">
   <input type="image" src="forward.gif" alt="Next">

   <div class="question_one question active">
       1
      <img src ="images/green_question1.png" width="100%" height="100%"></img>
    </div>

    <div class="question_two question">
       2
        <img src ="images/green_question2.png" width="100%" height="100%"></img>
     </div>

        <div class="question_three question ">
            3
        <img src ="images/green_question3.png" width="100%" height="100%"></img>
        </div>

        <div class="question_four question">
            4
        <img src ="images/green_question4.png" width="100%" height="100%"></img>
        </div>
    </div>

Jquery的

 <script>
    var $container = $("#container") // caches the jquery object 
    $container.find('input[alt="Next"]').on("click",function(){
       var active = $container.find(".active")

       if(active.next(".question").length === 0){
            return false
        }else{
           active.removeClass("active")
           active.next(".question").addClass("active")
       }

    })
    $container.find('input[alt="Back"]').on("click",function(){
        var active = $container.find(".active")

        if(active.prev(".question").length === 0){
            return false
        }else{
           active.removeClass("active")
           active.prev(".question").addClass("active")
       }
    })

    </script>

CSS

<style>
#container .question{
    display:none
}
#container .active{
    display:inline-block;
}
</style>

JS FIDDLE

http://jsfiddle.net/vrnxL9n8/

编辑：添加了js小提琴链接

如何用按钮将div更改为另一个div？

4 个答案:

HTML

Jquery的

CSS

JS FIDDLE