Javascript 如何使用按钮单击显示和显示div?

Javascript 如何使用按钮单击显示和显示div?,javascript,jquery,Javascript,Jquery,您能告诉我如何在按钮上单击下一个div按钮时显示下一个div按钮。在按钮上单击上一个div按钮时显示上一个div按钮吗 我有5个div。第一次显示Firstdiv。当用户单击next按钮时,它应该显示seconddiv并隐藏Firstdiv。然后用户再次单击它隐藏seconddiv并显示thirddiv..以此类推。当用户单击previous时,它显示以前的div` $(function(){ $('#pre').click(function(){ alert('pre');

您能告诉我如何在按钮上单击下一个
div
按钮时显示下一个
div
按钮。在按钮上单击上一个
div
按钮时显示上一个
div
按钮吗

我有
5个
div。第一次显示
First
div。当用户单击
next
按钮时,它应该显示
second
div并隐藏
First
div。然后用户再次单击它隐藏
second
div并显示
third
div..以此类推。
当用户单击
previous
时,它显示以前的
div`

$(function(){

  $('#pre').click(function(){
    alert('pre');
    $('.imageBlock').hide();
     $('.imageBlock').show()
  })

  $('#next').click(function(){
    alert('next');
     $('.imageBlock').hide();
    $('.imageBlock').show()
  })

})

使用帮助计数器变量,该变量将保存实际显示图像的索引信息。然后,使用
eq()
函数显示具有当前索引的图像

$(函数(){
var计数器=0;
$('.currentPage').text(计数器+1);
$('pre').prop('disabled',true);
$(“#下一步”)。单击(函数(){
如果(计数器<4){
计数器++;
$('.imageBlock').hide();
$('.imageBlock').eq(计数器).show();
}
$('.currentPage').text(计数器+1);
})
$('#pre')。单击(函数(){
如果(计数器>0){
计数器--;
$('.imageBlock').hide();
$('.imageBlock').eq(计数器).show();
}
$('.currentPage').text(计数器+1);
})
$(“#下一步,#前一步”)。单击(函数(){
如果(计数器==0){
$('pre').prop('disabled',true);
}否则如果(计数器==4){
$('#next').prop('disabled',true);
}否则{
$('pre').prop('disabled',false);
$('#next').prop('disabled',false);
}
})
})
div.imageBlock{
宽度:100px;
高度:100px;
边框:1px实心
}

JS-Bin
/5
1.
2.
3.
4.
5.
下一个
之前

使用帮助计数器变量,该变量将保存实际显示图像的索引信息。然后,使用
eq()
函数显示具有当前索引的图像

$(函数(){
var计数器=0;
$('.currentPage').text(计数器+1);
$('pre').prop('disabled',true);
$(“#下一步”)。单击(函数(){
如果(计数器<4){
计数器++;
$('.imageBlock').hide();
$('.imageBlock').eq(计数器).show();
}
$('.currentPage').text(计数器+1);
})
$('#pre')。单击(函数(){
如果(计数器>0){
计数器--;
$('.imageBlock').hide();
$('.imageBlock').eq(计数器).show();
}
$('.currentPage').text(计数器+1);
})
$(“#下一步,#前一步”)。单击(函数(){
如果(计数器==0){
$('pre').prop('disabled',true);
}否则如果(计数器==4){
$('#next').prop('disabled',true);
}否则{
$('pre').prop('disabled',false);
$('#next').prop('disabled',false);
}
})
})
div.imageBlock{
宽度:100px;
高度:100px;
边框:1px实心
}

JS-Bin
/5
1.
2.
3.
4.
5.
下一个
之前

它不会像
3/5
那样在数字“1/5”上方更新为“2/5”。当用户处于最后一个div时,我们可以隐藏
next
按钮吗?或者我们可以先隐藏
pre
按钮吗time@user5711656好吗?请记住向上投票/标记答案(:在数字“1/5”上方不会更新为“2/5”,就像
3/5
当用户在最后一个div时,我们可以隐藏
next
按钮吗..或者我们可以先隐藏
pre
按钮吗time@user5711656没问题吧?记得给答案加上分数(: