我有一个带有Twitter Bootstrap Wizard的表单，我有几个图像，当我选择一个时，我必须在本地存储值并转到下一个选项卡 ( o._nextTab)。
当我单击图像时，它应该转到下一个选项卡，但目前无法正常工作。
这是这样的想法：
(function($) {
"use strict";
var sdm = function() {
var o = this;
$(document).ready(function() {
o.initialize();
});
};
var p = sdm.prototype;
p.initialize = function() {
this._initChartWizard();
};
//Chart Wizard form
p._initChartWizard = function () {
var o = this;
$('#chartwizard').bootstrapWizard({
onTabShow: function (tab, navigation, index) {
o._handleTabShow(tab, navigation, index, $('#chartwizard'));
o._nextTab(o);
}
});
$('#chartwizard').bootstrapWizard({ 'nextSelector': '.chartOption' });
}
p._handleTabShow = function (tab, navigation, index, wizard) {
var total = navigation.find('li').length;
var current = index + 0;
var percent = (current / (total - 1)) * 100;
var percentWidth = 100 - (100 / total) + '%';
navigation.find('li').removeClass('done');
navigation.find('li.active').prevAll().addClass('done');
wizard.find('.progress-bar').css({ width: percent + '%' });
$('.form-wizard-horizontal').find('.progress').css({ 'width': percentWidth });
}
p._nextTab = function(wizard) {
$('.nextT').click(function(){
wizard('next');
});
}
window.boostbox = window.boostbox || {};
window.boostbox.sdm = new sdm;
}(jQuery)); // pass in (jQuery):
会有几个图像，我想单击图像并转到下一个选项卡，或者至少选择图像然后单击下一步时获取值。
我正在使用pyjade创建模板，所以如果那里有任何想法或使用 javascript 将受到欢迎。
<div id="chartwizard" class="form-wizard form-wizard-horizontal">
<form role="form" novalidate="novalidate" class="form-horizontal form-bordered">
<div class="form-wizard-nav">
<div class="progress">
<div class="progress-bar progress-bar-primary"></div>
</div>
<ul class="nav nav-justified">
<li class="active"><a href="#tab1" data-toggle="tab"><span class="step">1</span><span class="title">Chart Type</span></a>
</li>
<li><a href="#tab2" data-toggle="tab"><span class="step">2</span><span class="title">Data Source</span></a>
</li>
<li><a href="#tab3" data-toggle="tab"><span class="step">3</span><span class="title">Data</span></a>
</li>
<li><a href="#tab4" data-toggle="tab"><span class="step">4</span><span class="title">Chart Options</span></a>
</li>
</ul>
</div>
<div class="tab-content">
<div id="tab1" class="tab-pane active">
<div class="row">
<div class="col-sm-3">
<div class="box">
<div class="box-body chartOption nexT"><a href="javascript:void(0);"><img src="static/assets/img/business-bars-graphic.png" class="img-responsive"/></a>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="box">
<div class="box-body"><a href="javascript:void(0);"><img src="static/assets/img/business-chart.png" class="img-responsive"/></a>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="box">
<div class="box-body"><a href="javascript:void(0);"><img src="static/assets/img/business-financial-chart (1).png" class="img-responsive"/></a>
</div>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab-pane"><br/><br/>
<p>Tab 2</p>
</div>
<div id="tab3" class="tab-pane"><br/><br/>
<p>Tab 3</p>
</div>
<div id="tab4" class="tab-pane"><br/><br/>
<p>Tab 4</p>
</div>
</div>
<div class="pager wizard">
<li class="previous first"><a href="javascript:void(0);">First</a>
</li>
<li class="previous"><a href="javascript:void(0);">Previous</a>
</li>
<li class="next last"><a href="javascript:void(0);">Last</a>
</li>
<li class="next"><a href="javascript:void(0);">Next</a>
</li>
</div>
</form>
</div>