【发布时间】：2019-03-14 10:05:37
【问题描述】：
下面是我一直在尝试的一段代码。 继续和上一个按钮不起作用，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>
【问题讨论】：
-
请向我们提供一个最小的工作示例（添加一些 HTML 和/或工作 sn-p，包含您的错误或问题），以便我们可以帮助您解决问题：stackoverflow.com/help/mcve。您可以添加一个事件侦听器，该侦听器类似于选项卡本身的单击事件到“上一个”和“继续”按钮。
-
仍然缺少代码，请告诉我们您要做什么：jsfiddle.net/psfy05jw
-
@Barrosy OP 提供了带有工作版本的 codeply 链接
-
@barbsan 这是 OP 从 Codeply 获得的代码，显然不能根据 OP 的具体情况工作，这就是为什么我试图弄清楚 OP 想要实现的目标。链接中提供的代码没有解决问题。
-
@Barrosy 如果您打开该链接，您会看到 prev 和 next 按钮在那里不起作用 - 与描述中的完全一样（它们会抛出错误 - 这个问题中缺少它）
标签： javascript html tabs nav-pills