我正在使用twitter bootstrap选项卡,并且我希望在用户切换其他选项卡时跟踪应用于active
标记的li
类。我一直跟踪类属性,因为我想通过将代码中的类属性更改为activate
来通过自己的自定义按钮激活选项卡。我正在使用以下代码来实现此目的:
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
@Component({
selector: 'app',
template: `
<div class="container-fluid" >
<ul class="nav nav-tabs" >
<li *ngFor="#tab of tabs" [(class)]="tab.class" ><a href="#{{tab.id}}" data-toggle="tab" >{{tab.id}}</a></li>
</ul>
<div class="tab-content">
<div *ngFor="#tab of tabs" [(class)]="tab.contentClass" [id]="tab.id" >{{tab.id}} content goes here.</div>
</div>
</div>
<button (click)="openTab('tab1')" >Tab 1 Button</button>
<button (click)="openTab('tab2')" >Tab 2 Button</button>
`
})
class MainApp{
public tabs = [
{class: "active", id: "tab1", contentClass:"tab-pane active"},
{class: "", id: "tab2", contentClass:"tab-pane"}
]
openTab(id){
var tabToActivate;
for(var i=0;i<this.tabs.length;i++){
if(this.tabs[i].id == id)
tabToActivate = this.tabs[i];
this.tabs[i].class = "";
this.tabs[i].contentClass = "tab-pane";
}
tabToActivate.class = "active";
tabToActivate.contentClass = "tab-pane active";
}
}
bootstrap(MainApp);
但是似乎在我切换不同的选项卡时,绑定中断或发生了什么,自定义的选项卡按钮暂时无法使用。为什么会这样呢?
我在plunkr here上重现了该问题
点击
tab2
点击
Tab Button 1
-不起作用。有什么想法吗?
最佳答案
我在您的插栓中发现了一些逻辑错误。现在,根据您的编码方式,检查下面的代码和可使用的插件。
working demo
<ul class="nav nav-tabs" >
<li *ngFor="#tab of tabs" (click)="openTab(tab.id)" [(class)]="tab.class" ><a href="#{{tab.id}}" data-toggle="tab" >{{tab.id}}. {{tab.class}}</a></li>
</ul>
openTab(id){
for(var i=0;i<this.tabs.length;i++){
console.log('started' + id);
if(this.tabs[i].id != id)
{
this.tabs[i].class = "";
this.tabs[i].contentClass = "tab-pane";
}
else
{
this.tabs[i].class = "active";
this.tabs[i].contentClass = "tab-pane active";
}
}
}