我遇到了麻烦，因为我尝试使用 Meteor 更改的选项卡无法正常工作。我有相同的代码，仅使用 HTML + CSS (Bootstrap) + jQuery，并且工作正常。但是当我将它放入我的 Meteor 应用程序时，选项卡无法正确更改，当我按下第一个选项卡上的“下一步”按钮时，它仅更改一次。
我没有看到任何解决方案。这是我没有使用 Meteor 的代码:
$('.btnNext').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Menu 1</a></li>
<li><a href="#tab2" data-toggle="tab">Menu 2</a></li>
<li><a href="#tab3" data-toggle="tab">Menu 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane" id="tab2">
<a class="btn btn-primary btnNext">Next</a>
<a class="btn btn-primary btnPrevious">Previous</a>
</div>
<div class="tab-pane" id="tab3">
<a class="btn btn-primary btnPrevious">Previous</a>
</div>
</div>
</body>
</html>
在我的 Meteor 应用程序中，我将 Javascript 更改为:
Template.nameTemplate.events({
"click .btnNext": function(){
$(".nav-tabs > .active").next("li").find("a").trigger("click");
}
});有人可以帮我解决这个问题吗？谢谢!
最佳答案
我猜测问题是 Bootstrap 在首次运行时会自动在带有 data-toggle="tab" 的元素上添加事件处理程序。 Meteor 在 Bootstrap 运行后呈现选项卡，这意味着它们不会自动实例化。
这意味着您需要自己做。 Bootstrap docs有一个这样做的例子:
$('#myTabs a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
对于您的示例，这意味着在您的事件中将 .click() 替换为 .tab('show'):
Template.nameTemplate.events({
"click .btnNext": function(e){
$(".nav-tabs > .active").next("li").find("a").tab("show");
}
});
关于javascript - 使用 Meteor 更改选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45598054/