我浪费了两整天来解决这个问题。这是一个多步进度条形式。接下来和上一节正常工作。但我需要像那样工作进度条开关。但这里用的是li。我想李：之前可点击。如果我们点击它。应通过单击下一个和上一个按钮来移动字段集。
<!-- progressbar -->
$(document).ready(function() {
$(".change-btn").click(function() {
$("#textboxes").toggle();
});
});
//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 + ')',
'position': 'absolute'
});
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'
});
});
$(".submit").click(function() {
return false;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="progressbar">
<li class="active" id="x1">Cart</li>
<li id="x2">Delivery</li>
<li id="x3">Payment</li>
<li id="x4">Confirmation</li>
</ul>
<fieldset id="field1">
<div class="row" id="m1">
<div class="col-md-6">
<p>Product</p>
</div>
<div class="col-md-2">
<p>Price</p>
</div>
<div class="col-md-2">
<p>Amount</p>
</div>
<div class="col-md-2">
<p>Cost</p>
</div>
</div>
<hr>
<div class="row" id="m1">
<div class="col-md-6">
<img src="images/shopping-bag.png">
<p>New Balance Men's street<br> Backpack
<br>
</p>
</div>
<div class="col-md-2">
<p>$</p>
</div>
<div class="col-md-2">
<div class="input-group" style="width:100px; margin:auto;">
<span class="input-group-btn">
<button type="button" class="quantity-left-minus btn btn-number" data-type="minus" data-field="" style="background:transparent; color:10;">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" id="quantity" name="quantity" class="form-control input-number" value="10" min="1" max="100" style="border:none; color:#555; width:50px;">
<span class="input-group-btn">
<button type="button" class="quantity-right-plus btn btn-number" data-type="plus" data-field="" style="background:transparent; color:10;">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
<div class="col-md-2">
<p>$970</p>
</div>
</div>
<hr>
<div class="row" id="m1">
<div class="col-md-6">
<img src="images/casual-t-shirt-.png">
<p>Lyle & Scott Men's Shirt
<span style="padding-left:65px;">Sleeve Camo Pocket</span>
</p>
</div>
<div class="col-md-2">
<p>$</p>
</div>
<div class="col-md-2">
<div class="input-group" style="width:100px; margin:auto;">
<span class="input-group-btn">
<button type="button" class="quantity1-left-minus btn btn-number" data-type="minus" data-field="" style="background:transparent; color:10;">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" id="quantity1" name="quantity1" class="form-control input-number" value="10" min="1" max="100" style="border:none; color:#555; width:50px;">
<span class="input-group-btn">
<button type="button" class="quantity1-right-plus btn btn-number" data-type="plus" style="background:transparent; color:10;" data-field="">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
<div class="col-md-2">
<p>$970</p>
</div>
</div>
<hr>
<div class="row" id="m1">
<div class="col-md-2">
<input type="button" name="btn-defualt" class="button5" style="border-radius:20px; background-color:white; padding:5px; font-size:10px;" value="Continue Shopping" />
</div>
<div class="col-md-2">
<p>Total:$1040</p>
</div>
</div>
<input type="button" name="next" class="next action-button" style="background-color:blue; margin-top:-25px;" value="Shipping" />
</fieldset>
<fieldset class="inner-padding" id="field1">
<div class="address" id="m2">
<label><input type="radio" name="optradio" style="width:auto"><strong>Current Address:</strong></label> Anu Abhraham, Thottingal House, Palliyalil Po, Kuthiran, Thrissur, 6890969
<hr>
<label><input type="radio" name="optradio" style="width:auto"><strong>Shipping Address:</strong></label> Anu Abhraham, Thottingal House, Palliyalil Po, Kuthiran, Thrissur, 6890969
<hr>
<!--<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" value="Change">
<i class="more-less glyphicon glyphicon-plus"></i>
ADD<input type="button" id="change-btn" name="type" value="ADD">
</a>-->
<i class="more-less glyphicon glyphicon-plus change-btn"></i><input type="button" class="change-btn" name="type" id="change-btn" value="Add" style="border:hidden;">
<div id="textboxes" style="display: none">
<div class="form-wrapper">
<form name="sentMessage" id="contactForm" role="form" method="post">
<div class="form-inp form-inp1">
<lable>Name</lable>
<span class="first-name-space"><input type="text" class="intyp" placeholder="First" aria-label="First name" required ></span>
</div>
<div class="form-inp form-inp1">
<span class="last-name-space"><input type="text" class="intyp" placeholder="Last" aria-label="Last name" required ></span>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-inp">
<lable>Email</lable>
<input type="email" class="intyp" id="Email" required>
</div>
</div>
<div class="col-md-6">
<div class="form-inp">
<lable>Phone</lable>
<input type="tel" class="intyp" id="Phone" required>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-inp">
<lable>Address</lable>
<input type="text" class="intyp" id="address" required>
</div>
</div>
<div class="col-md-6">
<!--<div class="from-drop-wrap">
<lable>Region</lable>
<div class="from-drop">
<select name="cars">
<option value="" selected="selected" class="gf_placeholder">-Select Region-</option>
<option value="Australasia">Australasia</option>
<option value="Europe">Europe</option>
<option value="Middle East & Africa">Middle East & Africa</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
</select>
</div>
</div>-->
<div class="from-drop-wrap">
<lable>Country</lable>
<div class="from-drop">
<select name="cars" id="Country" required>
<option value="" selected="selected" class="gf_placeholder">-Country-</option>
<option value="Australasia">India</option>
<option value="Europe">America</option>
<option value="Middle East & Africa">UK</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="from-drop-wrap">
<lable>City</lable>
<div class="from-drop">
<select name="cars" id="City" required>
<option value="" selected="selected" class="gf_placeholder">-City-</option>
<option value="Australasia">Bangalore</option>
<option value="Europe">Europe</option>
<option value="Middle East & Africa">Middle East & Africa</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<!--<div class="form-inp">
<lable>Country</lable>
<input type="text" class="intyp" id="Country" required>
</div>-->
<!--<div class="form-inp">
<lable>City</lable>
<input type="text" class="intyp" id="City" required>
</div>-->
<div class="form-inp">
<lable>Zip</lable>
<input name="zip" type="text" class="intyp" id="zip" required>
</div>
</div>
</div>
<button type="submit" name="type" value="Proceed" class="mybu">
<p align="center">Submit</p>
</button>
</div>
<!--<input type="button" id="change-btn" name="type" value="Proceed">-->
</div>
</div>
<input type="button" id="del-btn" name="previous" class="previous action-button-previous" value="Previous" style="margin:30px; text-align:center;" />
<input type="button" id="del-btn" name="next" class="next action-button" value="Shipping" style="margin:30px; text-align:center;" />
</fieldset>
<fieldset></fieldset>
请检查图像。我点击任何进度条按钮，这个进度条向前和向后移动都不起作用。像下一个amd上一个按钮我也想进行进度条按钮