如何为多个div窗体创建上一个和下一个按钮？
如何为多个div窗体创建上一个和下一个按钮？
提问于 2015-11-10 03:36:46
我有一个表单，它有几个“页面”，每个“页面”都是一个容器，里面有一些内容。
我想让以前的按钮和下一个按钮遵循这些规则：
- 单击“下一步”按钮应向前移动到窗体的页面，直到最后一页并停止。
- 单击上一个按钮应该在表单中向后移动，直到第一页结束为止。
下面是类似功能的示例只是不遵循上面的规则，因为在最后一个页面上点击next会回到第一个循环，反之亦然。
以下是我到目前为止尝试过的：
JS
$('.box button').click(function() {
$('.box').each( function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
}
});
var t=$(this);
t.parent().animate({
left: '-50%'
}, 500);
if (t.parent().next().size() > 0) {
t.parent().next().animate({
left: '50%'
}, 500);
} else {
t.parent().prevAll().last().animate({
left: '50%'
}, 500);
}
});Stack Overflow用户
回答已采纳
发布于 2015-11-10 04:05:34
以下是实现这一目标的一种方法(请注意，这可以简化一些，但这样做会使新的编程人员更难以理解)：
$('.previous').click(function () {
var cur = $('.form-panel').index($('.form-panel.active'));
if (cur!=0) {
$('.form-panel').removeClass('active');
$('.form-panel').eq(cur-1).addClass('active');
}
});
$('.next').click(function () {
var cur = $('.form-panel').index($('.form-panel.active'));
if (cur!=$('.form-panel').length-1) {
$('.form-panel').removeClass('active');
$('.form-panel').eq(cur+1).addClass('active');
}
});.form-panel:not(.active) {
display:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-panel active">Panel one content here</div>
<div class="form-panel">Panel two content here</div>
<div class="form-panel">Panel three content here</div>
<div class="form-panel">Panel four content here</div>
<div class="form-panel">Panel five content here</div>
<div class="form-panel">Panel six content here</div>
<br>
<button class="previous">Previous</button>
<button class="next">Next</button>
如果您需要动画，可以很容易地修改此方法以包括它们。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33622441
复制相关文章
相似问题
腾讯云开发者
