使用流星更改標籤

我遇到了麻煩，因爲我試圖使用Meteor更改的選項卡無法正常工作。我有相同的代碼只使用HTML + CSS（Bootstrap）+ jQuery，它工作正常。但是當我將它放入我的Meteor應用程序中時，選項卡沒有正確更改，在第一個選項卡上按「Next」按鈕時，它只會更改一次。使用流星更改標籤

我看不到任何解決方案。這是不使用流星我的代碼：

$('.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>

在我的流星應用程序，我改變了Javascript來：

Template.nameTemplate.events({ 
 

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

 
});

誰能幫我有這個問題嗎？謝謝！

來源

2017-08-09 Thiago Almeida Marques

我猜這個問題是Bootstrap在第一次運行時自動添加事件處理程序的元素與data-toggle="tab"。 Meteor在bootstrap運行後呈現選項卡，意味着它們不會自動實例化。

這意味着你需要自己動手做。該Bootstrap docs有這樣類似這樣的例子：

$('#myTabs a').click(function (e) { 
    e.preventDefault() 
    $(this).tab('show') 
})

對於你的榜樣，這意味着在你的事件.tab('show')替換.click()：

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

來源

2017-08-10 00:25:18

使用流星更改標籤

回答

相關問題