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

可否请告诉我如何显示下一个div按钮点击next按钮。并显示以前的div点击previous按钮。如何使用按钮单击显示和显示div？

https://jsbin.com/zeleloxifo/edit?html,css,js,output

我5申报单。第一时间first格是next按钮显示。当用户点击它应该显示second股利和再次隐藏first格。然后用户点击它隐藏second股利和显示third股利。。所以对... when user click on以前it show previous div`

$(function(){ 

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

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

})

来源

2017-03-06 user5711656

使用帮助反变量，其将持有的信息是什么的索引可以显示图像。然后，使用eq()函数显示当前索引的图像。

$(function() { 
 

 
    var counter = 0; 
 
    $('.currentPage').text(counter+1); 
 
    $('#pre').prop('disabled', true); 
 
    
 
    $('#next').click(function() { 
 
    if (counter < 4) { 
 
     counter++; 
 
     $('.imageBlock').hide(); 
 
     $('.imageBlock').eq(counter).show(); 
 
    } 
 
    $('.currentPage').text(counter+1); 
 
    }) 
 
    $('#pre').click(function() { 
 
    if (counter > 0) { 
 
     counter--; 
 
     $('.imageBlock').hide(); 
 
     $('.imageBlock').eq(counter).show(); 
 
    } 
 
    $('.currentPage').text(counter+1); 
 
    }) 
 
    
 
    $('#next, #pre').click(function() { 
 
    if (counter == 0) { 
 
     $('#pre').prop('disabled', true); 
 
    } else if (counter == 4) { 
 
     $('#next').prop('disabled', true); 
 
    } else { 
 
     $('#pre').prop('disabled', false); 
 
     $('#next').prop('disabled', false); 
 
    } 
 
    }) 
 

 
})

div.imageBlock { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <div class="slideno"> 
 
    <span class="currentPage"> 
 
    </span>/<span class="totalPage">5 
 
    </span></div> 
 
    <div class="imageBlock">1</div> 
 
    <div class="imageBlock" style="display:none">2</div> 
 
    <div class="imageBlock" style="display:none">3</div> 
 
    <div class="imageBlock" style="display:none">4</div> 
 
    <div class="imageBlock" style="display:none">5</div> 
 
    <button id="next">next</button> 
 
    <button id="pre">pre</button> 
 
</body> 
 

 
</html>

来源

2017-03-06 17:10:49

它不更新以上数字 “1/5” 至 “2/5” 这样的'3/5' – user5711656

我们可以隐藏'next'按钮，当用户在最后一个div。。或者我们可以在第一时间隐藏'pre'按钮 – user5711656

@ user5711656它可以吗？记得点赞/标记答案（： –

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

回答

相关问题