我想通过点击键盘左右按钮（37和39）来控制下一个和上一个按钮。
我尝试编写一个javascript代码来执行此操作，但它仅适用于第一个和第二个选项卡。
这是没有css的完整代码
<?php
$nexticon = '<span style="font-size: 28px;"><i class="fi-arrow-right"></i></span>';
$previousicon = '<span style="font-size: 28px;"><i class="fi-arrow-left"></i></span>';
?>
<div style="position: absolute; z-index: 7;">
<!-- multistep form -->
<form id="msform" method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" autocomplete="off">
<!-- fieldsets -->
<fieldset>
bla bla bla page 1
<button class="next action-button-next" type="button" style=" position: absolute; top: 990px; left:380px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $nexticon ?></i></button>
</fieldset>
<fieldset>
<form name="change">
bla bla bla page 2
<button class="previous action-button-previous" type="button" style=" position: absolute; top: 990px; left:135px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $previousicon ?></button>
<button class="next action-button-next" type="button" style=" position: absolute; top: 990px; left:380px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $nexticon ?></button>
</fieldset>
<fieldset>
bla bla bla page 3
<button class="previous action-button-previous" type="button" style=" position: absolute; top: 990px; left:135px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $previousicon ?></button>
<button class="next action-button-next" type="button" style=" position: absolute; top: 990px; left:380px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $nexticon ?></i></button>
</fieldset>
<fieldset>
bla bla bla page 4
<button class="previous action-button-previous" type="button" style=" position: absolute; top: 990px; left:135px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $previousicon ?></button>
<button class="next action-button-next" type="button" style=" position: absolute; top: 990px; left:380px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $nexticon ?></i></button>
</fieldset>
<fieldset>
bla bla bla page 5
<button class="previous action-button-previous" type="button" style=" position: absolute; top: 990px; left:135px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $previousicon ?></button>
<button class="next action-button-next" type="button" style=" position: absolute; top: 990px; left:380px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $nexticon ?></i></button>
</fieldset>
<fieldset>
bla bla bla page 6
<button class="previous action-button-previous" type="button" style=" position: absolute; top: 990px; left:135px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $previousicon ?></button>
<button class="next action-button-next" type="button" style=" position: absolute; top: 990px; left:380px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $nexticon ?></i></button>
</fieldset>
<fieldset>
bla bla bla page 7
<button class="previous action-button-previous" type="button" style=" position: absolute; top: 990px; left:135px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $previousicon ?></button>
</fieldset>
<!-- progressbar -->
<ul id="progressbar">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</form>
<!-- jQuery easing plugin -->
<script src="js/jquery.easing.min.js" type="text/javascript"></script>
<script>
$(function() {
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(".next").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'transform': 'scale('+scale+')'});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".previous").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//de-activate current step on progressbar
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1-now) * 50)+"%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
});
</script>
答案 0 :(得分：0)
您在哪里放置处理程序？我不能猜测你的推荐方法。
这就是我要做的事：
由于与单个实例的绑定可能会强制用户聚焦那些fieldset容器，我会在文档中注册一个全局事件处理程序。通过检查当前可见字段集及其子导航按钮的可见性，它可以执行显示动画的相应操作。
$(function() {
$('#ctnFieldSets div').each(function( index ) {
var fs = $(this);
// hide buttons
if (!fs.prev('div').length) fs.find('button.prev').hide();
if (!fs.next('div').length) fs.find('button.next').hide();
// hide pages
if (index > 0) fs.hide();
});
// register handlers for buttons
$('#ctnFieldSets div button.prev, #ctnFieldSets div button.next').bind({
click: function(e) {
var btn = $(this);
var fs = $(btn.parent('div')[0]);
fs.hide();
if (btn.is('.prev')) {
// animation here //
$(fs.prev('div')[0]).show();
return;
}
if (btn.is('.next')) {
// animation here //
$(fs.next('div')[0]).show();
return;
}
}
});
// register global event handler for keydown. you may bind to other objects if
// you don't want to be global event handler
$(document).bind({
keydown: function(e) {
// you should check targets here. skips when target could input text
if ($(e.target).is('input,textarea')) return;
var fs = null;
switch(e.keyCode) {
case 37:
fs = $($('#ctnFieldSets div:visible').first()[0]);
if (!fs.find('button.prev:visible').length) return;
// animation here //
fs.hide();
$(fs.prev('div')[0]).show();
break;
case 39:
fs = $($('#ctnFieldSets div:visible').first()[0]);
if (!fs.find('button.next:visible').length) return;
// animation here //
fs.hide();
$(fs.next('div')[0]).show();
break;
default:
return;
}
}
});
});
<div id="ctnFieldSets">
<div><button class='prev'>Prev</button>Div1<input><button class='next'>Next</button></div>
<div><button class='prev'>Prev</button>Div2<input><button class='next'>Next</button></div>
<div><button class='prev'>Prev</button>Div3<input><button class='next'>Next</button></div>
</div>