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

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

javascript html

Javascript 如何使用按钮将一个div更改为另一个div？,javascript,html,Javascript,Html,我有下一个按钮和后退按钮。我想一次展示一个问句。然后我希望下一步按钮将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_

我有下一个按钮和后退按钮。我想一次展示一个问句。然后我希望下一步按钮将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>

您可以通过组合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>

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

div.active {
    display: block;
}

$("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');
});

jQuery代码

<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>

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

div.active {
    display: block;
}

$("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');
});

这里有一个简单的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>


var next=document.getElementById（'next'），
back=document.getElementById（'back'），
问题=document.getElementsByTagName（'div'），
电流=0；
next.onclick=函数showNext（）{
如果（问题[当前+1]）{
问题[当前].style.display='none'；
问题[current+1].style.display='block'；
电流++；
}否则{
返回false；
}
}
back.onclick=函数showPrev（）{
如果（问题[当前-1]）{
问题[当前].style.display='none'；
问题[current-1].style.display='block'；
当前--；
}否则{
返回false；
}
}

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


div:not（：类型的第一个）{
显示：无；
}

编辑：这是你的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>

首先，用唯一的名称重新组合类，并将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
}

var实际值=0；//默认情况下，选择第一个问题
$（文档）.ready（函数（）{
var number of_question=$（'.question'）.length；//获取问题数量
$（'.question:gt（'+actual+'））.hide（）；//隐藏取消选择问题
$（'#nextQ'）。单击（函数（）{
if（实际值<问题数量-1）{
changeQuestion（实际+1）；//显示选择问题
}
});
$（'#forwardQ'）。单击（函数（）{
如果（实际）{
changeQuestion（实际值-1）；//显示选择问题
}
});
});
函数更改问题（新问题）{
$（'.question:eq（'+actual+'））.hide（）；//隐藏当前问题
$（'.question:eq（'+newQuestion+'））.show（）；//显示新问题
actual=newQuestion；//记住实际选择
}

HTML


1.
2.
3.
4.

滑动分页


var$container=$（“#container”）//缓存jquery对象
$container.find（'input[alt=“Next”]”）。在（“单击”，函数（）上{
var active=$container.find（“.active”）
if（活动的下一个（“.question”）.length==0）{
返回错误
}否则{
active.removeClass（“active”）
active.next（“.question”）.addClass（“active”）
}
})
$container.find（'input[alt=“Back”]”）。在（“click”，function（）上{
var active=$container.find（“.active”）
if（active.prev（“.question”）.length==0）{
返回错误
}否则{
active.removeClass（“active”）
active.prev（“.question”）.addClass（“active”）
}
})

CSS


#集装箱问题{
显示：无
}
#容器。活动{
显示：内联块；
}

JS小提琴

编辑：添加了js fiddle链接

您是否尝试在Javascript中实现此功能？使用jQuery将相当容易。对于普通Javascript，这将是+1，因为问题中没有标记jQuery。嗯，您确定添加了id=“next”和id=“back”吗无法将onclick值设置为null是指向此行的错误。onclick=function showNext（）{现在编辑了代码的HTML部分，它应该在任何浏览器中都能100%工作。

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