Javascript 如何在Meteor中使用物化css选项卡？

Meteor.js和。我不完全理解如何将选项卡动态连接到3个不同的选项卡，因此当用户单击它时，

.tab指示器

/

活动

属性会随着所需的路由路径滑动。如果我这样做：

client/app.html

选项卡指示器可以工作，但不会更改指向正确页面的链接。

---

这就像它阻止了进入页面的能力一样。我需要帮助来做这件事，我已经做了一段时间了。谢谢。

另一个更新如果您不想定义每个选项卡，可以这样做

Js

//Manual Method
/*Template.tabs.rendered = function() {
   if(Router.current().route.path() === '/page2'){
      $("#nt2 a").addClass('active');
    }else if(Router.current().route.path() === '/page3'){
      $("#nt3 a").addClass('active');
    }  
    $('ul.tabs').tabs(); 
}


Template.tabs.events({
  'click #nt1': function(){
    Router.go('/');
  },
  'click #nt2': function(){
    Router.go('page2');
  },
  'click #nt3': function(){
    Router.go('page3');
  }

})*/ 

//Auto Method
Template.tabs.rendered = function() {   
    $("#"+Router.current().route.getName()).addClass('active');     
    $('ul.tabs').tabs(); 
  }


Template.tabs.events({
  'click .tabs li': function(e, t){
    var href = e.target.id;     
    Router.go(href);
  }  
})

路由器

Router.configure({
  layoutTemplate: 'layout',  
});

Router.route('/', function () {  
  this.render('page-one');  
},{
  name: 'page-one'
});

Router.route('/page2', function () {
  this.render('page-two');
},{
  name: 'page-two'
});

Router.route('/page3', function () {
  this.render('page-three');
},{
  name: 'page-three'
});

Html

<template name="layout">
  {{> tabs}}

  {{> yield}} 
</template>
<template name="tabs">
    <!--Manual Method-->
    <!--<ul class="tabs nav-tabs hide-on-med-and-down">
       <li class="tab col s4" id="nt1"><a href="/">Page One</a></li>
       <li class="tab col s4" id="nt2"><a href="/page2">Page Two</a></li>
       <li class="tab col s4" id="nt3"><a href="/page3">Page Three</a></li>
    </ul>-->

    <!--Auto Method-->
    <ul class="tabs nav-tabs hide-on-med-and-down">
      <li class="tab col s4"><a id="page-one" href="/">Page One</a></li>
      <li class="tab col s4"><a id="page-two" href="/page2">Page Two</a></li>
      <li class="tab col s4"><a id="page-three" href="/page3">Page Three</a></li>
    </ul>
</template>

<template name="page-one">
    <p>i am page-one</p>
</template>

<template name="page-two">
    <p>i am page-two</p>
</template>


<template name="page-three">
     <p>i am page-three</p>
</template>

{{>制表符}
{{>产量}





我是第一页

我在第二页

我是第三页

如果您可以在不使用

路由器的情况下渲染选项卡，这可能很有用

假设这些是要基于选项卡单击渲染内容的模板：

<template name="page1">
.....
</template>

<template name="page2">
.....
</template>

<template name="page3">
.....
</template>

请尝试“Template.tabs.onRendered（function（）{”而不是“Template.tabs.rendered=function（）{”

最后，选项卡的初始化应该如下所示：

    Template.tabs.onRendered(function(){
      $("ul.tabs").tabs();
    });

试试
Template.tabs.rendered
@Mat.该死的，没用。你添加了一些路由器吗？？？@Mat.Like
router.route（'/page one'））
？如果是，是的。这实际上不起作用。它所做的是在Page1链接上启动活动状态，但当您单击Page2时，它将转到Page2，而不显示活动状态，依此类推。您可以通过再次单击它来获取活动状态。需要考虑如何使它执行正确的行为。不过这是一个很好的步骤。谢谢。@JohnHuntingt在ok上，我更新了我的答案，这是一个完整的工作示例。如果你需要看到它的实际效果，请告诉我上传它。这很好。我感谢你的回答。我也将与你一起练习。谢谢。
<template name="page1">
.....
</template>

<template name="page2">
.....
</template>

<template name="page3">
.....
</template>

<template name="display">
    {{>tabs}}
    {{#if activeTab 'nt1'}}
        {{>page1}}
    {{/if}}

    {{#if activeTab 'nt2'}}
        {{>page2}}
    {{/if}}

    {{#if activeTab 'nt3'}}
        {{>page3}}
    {{/if}}
</template>

activeTab = new ReactiveVar('nt1'); //Your default tab

Template.display.helpers({
    activeTab: function(tab){
        return (activeTab.get() == tab);
});

Template.tabs.events({
  'click #nt1': function(){
    activeTab.set('nt1');
  },
  'click #nt2': function(){
    activeTab.set('nt2');
  },
  'click #nt3': function(){
    activeTab.set('nt3');
  }
});

    Template.tabs.onRendered(function(){
      $("ul.tabs").tabs();
    });