我正在使用这个creativetim主题Link
有一个向导，它具有三个选项卡，用户在填写字段时单击下一步按钮，然后转到下一个选项卡。
这是Wizard.html的代码
<div class="wizard-container">
<div class="card card-wizard" data-color="primary" id="wizardProfile">
<form action="" method="">
<!-- You can switch " data-color="primary" " with one of the next bright colors: "green", "orange", "red", "blue" -->
<div class="card-header text-center" data-background-color="orange">
<h3 class="card-title">
Build Your Profile
</h3>
<h3 class="description">This information will let us know more about you.</h5>
<div class="wizard-navigation">
<ul>
<li class="nav-item">
<a class="nav-link active" href="#about" data-toggle="tab">
<i class="now-ui-icons users_circle-08"></i> About
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#account" data-toggle="tab">
<i class="now-ui-icons ui-1_settings-gear-63"></i> Account
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#address" data-toggle="tab">
<i class="now-ui-icons ui-1_email-85"></i> Address
</a>
</li>
</ul>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="about">
<h5 class="info-text"> Let's start with the basic information (with validation)</h5>
<div class="row justify-content-center">
<div class="col-sm-4">
<div class="picture-container">
<div class="picture">
<img src="../../assets/img/default-avatar.png" class="picture-src" id="wizardPicturePreview" title="" />
<input type="file" id="wizard-picture">
</div>
<h6 class="description">Choose Picture</h6>
</div>
</div>
<div class="col-sm-6">
<div class="input-group form-control-lg">
<span class="input-group-addon">
<i class="now-ui-icons users_circle-08"></i>
</span>
<input type="text" class="form-control" placeholder="First Name (required)" name="firstname">
</div>
<div class="input-group form-control-lg">
<span class="input-group-addon">
<i class="now-ui-icons text_caps-small"></i>
</span>
<input type="text" placeholder="Last Name (required)" class="form-control" name="lastname" />
</div>
</div>
<div class="col-lg-10 mt-3">
<div class="input-group form-control-lg">
<span class="input-group-addon">
<i class="now-ui-icons text_caps-small"></i>
</span>
<input type="email" placeholder="Email (required)" class="form-control" name="email" />
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="account">
<h5 class="info-text"> What are you doing? (checkboxes) </h5>
<div class="row justify-content-center">
<div class="col-lg-10">
<div class="row">
<div class="col-sm-4">
<div class="choice" data-toggle="wizard-checkbox">
<input type="checkbox" name="jobb" value="Design">
<div class="icon">
<i class="now-ui-icons design-2_ruler-pencil"></i>
</div>
<h6>Design</h6>
</div>
</div>
<div class="col-sm-4">
<div class="choice" data-toggle="wizard-checkbox">
<input type="checkbox" name="jobb" value="Code">
<div class="icon">
<i class="now-ui-icons business_bulb-63"></i>
</div>
<h6>Code</h6>
</div>
</div>
<div class="col-sm-4">
<div class="choice" data-toggle="wizard-checkbox">
<input type="checkbox" name="jobb" value="Develop">
<div class="icon">
<i class="now-ui-icons tech_tv"></i>
</div>
<h6>Develop</h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="address">
<div class="row justify-content-center">
<div class="col-sm-12">
<h5 class="info-text"> Are you living in a nice area? </h5>
</div>
<div class="col-sm-7">
<div class="form-group">
<label>Street Name</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Street No.</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label>City</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label>Country</label>
<select class="selectpicker" data-size="7" data-style="btn btn-primary btn-round" title="Single Select">
<option value="Afghanistan"> Afghanistan </option>
<option value="Albania"> Albania </option>
<option value="Algeria"> Algeria </option>
<option value="American Samoa"> American Samoa </option>
<option value="Andorra"> Andorra </option>
<option value="Angola"> Angola </option>
<option value="Anguilla"> Anguilla </option>
<option value="Antarctica"> Antarctica </option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer">
<div class="pull-right">
<input type='button' class='btn btn-next btn-fill btn-rose btn-wd btn_wait' name='next' value='Next' />
<input type='button' class='btn btn-finish btn-fill btn-rose btn-wd' name='finish' value='Finish' />
</div>
<div class="pull-left">
<input type='button' class='btn btn-previous btn-fill btn-default btn-wd' name='previous' value='Previous' />
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</div>
我正在执行此操作，当我单击下一个按钮时禁用了几秒钟，但是在这里它不起作用是单击按钮时的计时器代码。
$(function() {
$(".btn_wait").click(function() {
$(".btn_wait").prop("disabled", true );
setTimeout(function() {
$(".btn_wait").prop("disabled", false);
}, 3000);
});
});
我希望当我单击“下一步”按钮时，它消失了几秒钟，然后移至下一个带有课程的选项卡。
答案 0 :(得分：3)
删除
$(function() {});
直接用户
$(".btn_wait").click(function() {
$(".btn_wait").prop("disabled", true );
setTimeout(function() {
$(".btn_wait").prop("disabled", false);
}, 3000);
});