继续和上一个按钮无法导航 Javascript bootstrap
Continue and previous buttons not navigating Javascript bootstrap
下面是我一直试图开始工作的一段代码。
继续和上一个按钮不起作用,javascript 不显示下一个和上一个选项卡。
Javascript:
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.prev').click(function () {
;
var prevId = $(this).parents('.tab-pane').prev().attr("id");
$('[href=#' + prevId + ']').tab('show');
return false;
});
$('.next').click(function () {
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('[href=#' + nextId + ']').tab('show');
return false;
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//update progress
var step = $(e.target).data('step');
var percent = (parseInt(step) / 6) * 100;
$('.progress-bar').css({ width: percent + '%' });
$('.progress-bar').text("Step " + step + " of 6");
//e.relatedTarget // previous tab
})
$('.first').click(function () {
$('#myWizard a:first').tab('show');
})
</script>
Html:
<div class="navbar">
<div class="navbar-inner">
<ul id="tabs1" class="nav nav-pills">
<li class="active"><a href="#step1" data-toggle="tab" data-step="1">Basic Details</a></li>
<li><a href="#step2" data-toggle="tab" data-step="2">Data Source</a></li>
<li><a href="#step3" data-toggle="tab" data-step="3">Feature Generation</a></li>
<li><a href="#step4" data-toggle="tab" data-step="4">Aggregation over Time</a></li>
<li><a href="#step5" data-toggle="tab" data-step="5">Analysis</a></li>
<li><a href="#step6" data-toggle="tab" data-step="6">Output</a></li>
</ul>
</div>
所以你的问题是 jQuery 语法(你应该看看你的控制台输出,你会发现错误)。
需要的是:
$('.prev').click(function(){
var prevId = $(this).parents('.tab-pane').prev().attr("id");
$('a[href$=\"#'+prevId+'\"]').tab('show');
return false;
})
$('.next').click(function(){
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('a[href$=\"#'+nextId+'\"]').tab('show');
return false;
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//update progress
var step = $(e.target).data('step');
var percent = (parseInt(step) / 6) * 100;
$('.progress-bar').css({width: percent + '%'});
$('.progress-bar').text("Step " + step + " of 6");
//e.relatedTarget // previous tab
})
$('.first').click(function(){
$('#myWizard a:first').tab('show')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" id="myWizard">
<h3>New Anomaly Detection Model</h3>
<hr>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="6" style="width: 20%;">
Step 1 of 6
</div>
</div>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-pills">
<li class="active"><a href="#step1" data-toggle="tab" data-step="1">Basic Details</a></li>
<li><a href="#step2" data-toggle="tab" data-step="2">Data Source</a></li>
<li><a href="#step3" data-toggle="tab" data-step="3">Feature Generation</a></li>
<li><a href="#step4" data-toggle="tab" data-step="4">Aggregation over Time</a></li>
<li><a href="#step5" data-toggle="tab" data-step="5">Analysis</a></li>
<li><a href="#step6" data-toggle="tab" data-step="6">Output</a></li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane fade in active" id="step1">
<div class="well">
<label>Security Question 1</label>
<select class="form-control input-lg">
<option value="What was the name of your first pet?">What was the name of your first pet?</option>
<option value="Where did you first attend school?">Where did you first attend school?</option>
<option value="What is your mother's maiden name?">What is your mother's maiden name?</option>
<option value="What is your favorite car model?">What is your favorite car model?</option>
</select>
<br>
<label>Enter Response</label>
<input class="form-control input-lg">
</div>
<a class="btn btn-default btn-lg next" href="#">Continue</a>
</div>
<div class="tab-pane fade" id="step2">
<div class="well">
<label>Choose Your Input Source</label>
<select class="form-control input-lg">
<option selected="" value="CSV">CSV</option>
<option value="Database">Database</option>
</select>
<br>
<label>Path</label>
<input class="form-control input-lg">
</div>
<a class="btn btn-default prev" href="#">Previous</a>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane fade" id="step3">
<div class="well"> <h2>Step 3</h2> Add another step here..</div>
<a class="btn btn-default prev" href="#">Previous</a>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane fade" id="step4">
<div class="well"> <h2>Step 4</h2> Add another almost done step here..</div>
<a class="btn btn-default prev" href="#">Previous</a>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane fade" id="step5">
<div class="well"> <h2>Step 5</h2> Almost there!</div>
<a class="btn btn-default prev" href="#">Previous</a>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane fade" id="step6">
<div class="well"> <h2>Step 6</h2> Last one!</div>
<a class="btn btn-default prev" href="#">Previous</a>
<a class="btn btn-success first" href="#">Start over</a>
</div>
</div>
<hr>
<a href="http://www.bootply.com/wj9gWh8ulj">Edit on Bootply</a>
<hr>
</div>
请注意 $("a[href$=\"#'+prevId+'\").tab('show');
是使您的按钮起作用的原因。
我的回答来源:Select tag with href
您在 $('[href=#' + nextId + ']')
和 $('[href=#' + prevId + ']')
中缺少引号
应该是:
$('[href="#' + nextId + '"]').tab('show');
//and
$('[href="#' + prevId + '"]').tab('show');
下面是我一直试图开始工作的一段代码。 继续和上一个按钮不起作用,javascript 不显示下一个和上一个选项卡。
Javascript:
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.prev').click(function () {
;
var prevId = $(this).parents('.tab-pane').prev().attr("id");
$('[href=#' + prevId + ']').tab('show');
return false;
});
$('.next').click(function () {
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('[href=#' + nextId + ']').tab('show');
return false;
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//update progress
var step = $(e.target).data('step');
var percent = (parseInt(step) / 6) * 100;
$('.progress-bar').css({ width: percent + '%' });
$('.progress-bar').text("Step " + step + " of 6");
//e.relatedTarget // previous tab
})
$('.first').click(function () {
$('#myWizard a:first').tab('show');
})
</script>
Html:
<div class="navbar">
<div class="navbar-inner">
<ul id="tabs1" class="nav nav-pills">
<li class="active"><a href="#step1" data-toggle="tab" data-step="1">Basic Details</a></li>
<li><a href="#step2" data-toggle="tab" data-step="2">Data Source</a></li>
<li><a href="#step3" data-toggle="tab" data-step="3">Feature Generation</a></li>
<li><a href="#step4" data-toggle="tab" data-step="4">Aggregation over Time</a></li>
<li><a href="#step5" data-toggle="tab" data-step="5">Analysis</a></li>
<li><a href="#step6" data-toggle="tab" data-step="6">Output</a></li>
</ul>
</div>
所以你的问题是 jQuery 语法(你应该看看你的控制台输出,你会发现错误)。
需要的是:
$('.prev').click(function(){
var prevId = $(this).parents('.tab-pane').prev().attr("id");
$('a[href$=\"#'+prevId+'\"]').tab('show');
return false;
})
$('.next').click(function(){
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('a[href$=\"#'+nextId+'\"]').tab('show');
return false;
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//update progress
var step = $(e.target).data('step');
var percent = (parseInt(step) / 6) * 100;
$('.progress-bar').css({width: percent + '%'});
$('.progress-bar').text("Step " + step + " of 6");
//e.relatedTarget // previous tab
})
$('.first').click(function(){
$('#myWizard a:first').tab('show')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" id="myWizard">
<h3>New Anomaly Detection Model</h3>
<hr>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="6" style="width: 20%;">
Step 1 of 6
</div>
</div>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-pills">
<li class="active"><a href="#step1" data-toggle="tab" data-step="1">Basic Details</a></li>
<li><a href="#step2" data-toggle="tab" data-step="2">Data Source</a></li>
<li><a href="#step3" data-toggle="tab" data-step="3">Feature Generation</a></li>
<li><a href="#step4" data-toggle="tab" data-step="4">Aggregation over Time</a></li>
<li><a href="#step5" data-toggle="tab" data-step="5">Analysis</a></li>
<li><a href="#step6" data-toggle="tab" data-step="6">Output</a></li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane fade in active" id="step1">
<div class="well">
<label>Security Question 1</label>
<select class="form-control input-lg">
<option value="What was the name of your first pet?">What was the name of your first pet?</option>
<option value="Where did you first attend school?">Where did you first attend school?</option>
<option value="What is your mother's maiden name?">What is your mother's maiden name?</option>
<option value="What is your favorite car model?">What is your favorite car model?</option>
</select>
<br>
<label>Enter Response</label>
<input class="form-control input-lg">
</div>
<a class="btn btn-default btn-lg next" href="#">Continue</a>
</div>
<div class="tab-pane fade" id="step2">
<div class="well">
<label>Choose Your Input Source</label>
<select class="form-control input-lg">
<option selected="" value="CSV">CSV</option>
<option value="Database">Database</option>
</select>
<br>
<label>Path</label>
<input class="form-control input-lg">
</div>
<a class="btn btn-default prev" href="#">Previous</a>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane fade" id="step3">
<div class="well"> <h2>Step 3</h2> Add another step here..</div>
<a class="btn btn-default prev" href="#">Previous</a>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane fade" id="step4">
<div class="well"> <h2>Step 4</h2> Add another almost done step here..</div>
<a class="btn btn-default prev" href="#">Previous</a>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane fade" id="step5">
<div class="well"> <h2>Step 5</h2> Almost there!</div>
<a class="btn btn-default prev" href="#">Previous</a>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane fade" id="step6">
<div class="well"> <h2>Step 6</h2> Last one!</div>
<a class="btn btn-default prev" href="#">Previous</a>
<a class="btn btn-success first" href="#">Start over</a>
</div>
</div>
<hr>
<a href="http://www.bootply.com/wj9gWh8ulj">Edit on Bootply</a>
<hr>
</div>
请注意 $("a[href$=\"#'+prevId+'\").tab('show');
是使您的按钮起作用的原因。
我的回答来源:Select tag with href
您在 $('[href=#' + nextId + ']')
和 $('[href=#' + prevId + ']')
应该是:
$('[href="#' + nextId + '"]').tab('show');
//and
$('[href="#' + prevId + '"]').tab('show');