Question

我遇到了麻烦，因为我试图使用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 App中，我正在将Javascript更改为：

Template.nameTemplate.events({

  "click .btnNext": function(){
    $(".nav-tabs > .active").next("li").find("a").trigger("click");
  }

});

有人可以帮我解决这个问题吗？谢谢！

Answer 1

我猜测问题是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");
  }
});

使用Meteor更改标签

1 个答案: