我正在使用我在网上找到的引导程序模板来创建一个简单的多步骤表单。模板顶部有一些图标，用于标识用户在表单完成过程中的位置。完成表单步骤并选择下一个按钮后，顶部的图标地图将前进到下一步，现在激活上一步（颜色已更改）。
我希望能够在用户完成步骤后将这些图标设置为活动链接，以便他们可以通过单击图标快速导航回上一步骤。如何激活后，如何使图标成为其关联步骤的活动链接。下面是我的html和js和jsfiddle链接。
HTML：
<body>
<!-- Top content -->
<div class="top-content">
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 form-box">
<form role="form" action="" method="post" class="f1">
<h3>Register To Our App</h3>
<p>Fill in the form to get instant access</p>
<div class="f1-steps">
<div class="f1-progress">
<div class="f1-progress-line" data-now-value="16.66" data-number-of-steps="3" style="width: 16.66%;"></div>
</div>
<div class="f1-step active">
<div class="f1-step-icon"><i class="fa fa-user"></i></div>
<p>about</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-key"></i></div>
<p>account</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>social</p>
</div>
</div>
<fieldset>
<h4>Tell us who you are:</h4>
<div class="form-group">
<label class="sr-only" for="f1-first-name">First name</label>
<input type="text" name="f1-first-name" placeholder="First name..." class="f1-first-name form-control" id="f1-first-name">
</div>
<div class="form-group">
<label class="sr-only" for="f1-last-name">Last name</label>
<input type="text" name="f1-last-name" placeholder="Last name..." class="f1-last-name form-control" id="f1-last-name">
</div>
<div class="form-group">
<label class="sr-only" for="f1-about-yourself">About yourself</label>
<textarea name="f1-about-yourself" placeholder="About yourself..." class="f1-about-yourself form-control" id="f1-about-yourself"></textarea>
</div>
<div class="f1-buttons">
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset>
<h4>Set up your account:</h4>
<div class="form-group">
<label class="sr-only" for="f1-email">Email</label>
<input type="text" name="f1-email" placeholder="Email..." class="f1-email form-control" id="f1-email">
</div>
<div class="form-group">
<label class="sr-only" for="f1-password">Password</label>
<input type="password" name="f1-password" placeholder="Password..." class="f1-password form-control" id="f1-password">
</div>
<div class="form-group">
<label class="sr-only" for="f1-repeat-password">Repeat password</label>
<input type="password" name="f1-repeat-password" placeholder="Repeat password..." class="f1-repeat-password form-control" id="f1-repeat-password">
</div>
<div class="f1-buttons">
<button type="button" class="btn btn-previous">Previous</button>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset>
<h4>Social media profiles:</h4>
<div class="form-group">
<label class="sr-only" for="f1-facebook">Facebook</label>
<input type="text" name="f1-facebook" placeholder="Facebook..." class="f1-facebook form-control" id="f1-facebook">
</div>
<div class="form-group">
<label class="sr-only" for="f1-twitter">Twitter</label>
<input type="text" name="f1-twitter" placeholder="Twitter..." class="f1-twitter form-control" id="f1-twitter">
</div>
<div class="form-group">
<label class="sr-only" for="f1-google-plus">Google plus</label>
<input type="text" name="f1-google-plus" placeholder="Google plus..." class="f1-google-plus form-control" id="f1-google-plus">
</div>
<div class="f1-buttons">
<button type="button" class="btn btn-previous">Previous</button>
<button type="submit" class="btn btn-submit">Submit</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</body>
JavaScript的：
function scroll_to_class(element_class, removed_height) {
var scroll_to = $(element_class).offset().top - removed_height;
if ($(window).scrollTop() != scroll_to) {
$('html, body').stop().animate({
scrollTop: scroll_to
}, 0);
}
}
function bar_progress(progress_line_object, direction) {
var number_of_steps = progress_line_object.data('number-of-steps');
var now_value = progress_line_object.data('now-value');
var new_value = 0;
if (direction == 'right') {
new_value = now_value + (100 / number_of_steps);
} else if (direction == 'left') {
new_value = now_value - (100 / number_of_steps);
}
progress_line_object.attr('style', 'width: ' + new_value + '%;').data('now-value', new_value);
}
jQuery(document).ready(function() {
/*
Form
*/
$('.f1 fieldset:first').fadeIn('slow');
$('.f1 input[type="text"], .f1 input[type="password"], .f1 textarea').on('focus', function() {
$(this).removeClass('input-error');
});
// next step
$('.f1 .btn-next').on('click', function() {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
// navigation steps / progress steps
var current_active_step = $(this).parents('.f1').find('.f1-step.active');
var progress_line = $(this).parents('.f1').find('.f1-progress-line');
// fields validation
parent_fieldset.find('input[type="text"], input[type="password"], textarea').each(function() {
if ($(this).val() == "") {
$(this).addClass('input-error');
next_step = false;
} else {
$(this).removeClass('input-error');
}
});
// fields validation
if (next_step) {
parent_fieldset.fadeOut(400, function() {
// change icons
current_active_step.removeClass('active').addClass('activated').next().addClass('active');
// progress bar
bar_progress(progress_line, 'right');
// show next step
$(this).next().fadeIn();
// scroll window to beginning of the form
scroll_to_class($('.f1'), 20);
});
}
});
// previous step
$('.f1 .btn-previous').on('click', function() {
// navigation steps / progress steps
var current_active_step = $(this).parents('.f1').find('.f1-step.active');
var progress_line = $(this).parents('.f1').find('.f1-progress-line');
$(this).parents('fieldset').fadeOut(400, function() {
// change icons
current_active_step.removeClass('active').prev().removeClass('activated').addClass('active');
// progress bar
bar_progress(progress_line, 'left');
// show previous step
$(this).prev().fadeIn();
// scroll window to beginning of the form
scroll_to_class($('.f1'), 20);
});
});
// submit
$('.f1').on('submit', function(e) {
// fields validation
$(this).find('input[type="text"], input[type="password"], textarea').each(function() {
if ($(this).val() == "") {
e.preventDefault();
$(this).addClass('input-error');
} else {
$(this).removeClass('input-error');
}
});
// fields validation
});
});
JSFiddle链接：https://jsfiddle.net/93r5y1g3/2/
答案 0 :(得分：1)
我个人不会制作图标链接，因为根据您当前的工作流程，您不希望实际导航到其他页面。你只想执行一些JavaScript。
相反，将cursor: pointer;添加到css以查找可点击的项目，并为符合条件的图标上的click个事件添加事件监听器。
这里我在鼠标悬停在可点击图标上时添加了光标更改。 https://jsfiddle.net/93r5y1g3/4/
它只是在css中设置以下内容：
.f1-step.activated > .f1-step-icon {
cursor: pointer;
}
关于fieldsets之间的实际变化，看起来你只是做相对移动。您的代码淡出了单击按钮的父字段集，并在next()中淡出。如果您打算允许在不同步骤之间跳转，则需要进行两项重大更改：
希望这会有所帮助。
修改
我已经更新了jsfiddle（https://jsfiddle.net/93r5y1g3/8/），并提供了在fieldsets之间跳转的工作示例。您只能跳转到活动的字段集。
以下是我改变的内容：
id个标记。data-fieldset，以便每个图标都可以链接到字段集。 这是听众：
// Go to step
$('.f1-step-icon').on('click', function(e){
var current_step = {
fieldset: $($(".f1-step.active").children('.f1-step-icon').data('fieldset')),
circle: $(".f1-step.active")
}
var jump_to_step = {
fieldset: $($(this).data('fieldset')),
circle: $(this).parent()
}
if (! jump_to_step.circle.hasClass("activated")) {
// Right now, this prevents users jumping forward.
// If you want jumping forward to be allowed, you need to add
// some logic to leave a step unfinished and force a return to it.
return;
}
current_step.fieldset.fadeOut(400, function() {
current_step.circle.removeClass('active').addClass('activated')
jump_to_step.circle.addClass('active');
jump_to_step.fieldset.fadeIn();
scroll_to_class($('.f1'), 20);
});
});