twitter-bootstrap 如何激活（导航选项卡）Bootstrap Twitter（Angular 2）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35550988/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How activate or not (nav tab) Bootstrap Twitter ( Angular 2 )
提问by Angel Angel
I have a nav, Twitter Bootstrap, inside one of the tab (#B ..), I have an image that tapping it changes to another tab (#C ..).
我有一个导航，Twitter Bootstrap，在其中一个选项卡中(#B ..)，我有一个图像，点击它会更改为另一个选项卡(#C ..)。
I can change that tab, but I can not, that the new tab (#C ..)is set to active. And where this picture tab (#B ..)is set to deactivate. (for example removeClass active)
我可以更改该选项卡，但不能将新选项卡(#C ..)设置为活动状态。以及此图片选项卡(#B ..)设置为停用的位置。（例如 removeClass 活动）
<ul class="nav nav-tabs">
<li class="nav active"> <a [attr.href]="'#A' + cObj" data-toggle="tab"> Info </a></li>
<li class="nav"> <a [attr.href]="'#B' + cObj" data-toggle="tab"> Info </a></li>
<li class="nav"> <a [attr.href]="'#C' + cObj" data-toggle="tab"> Info </a></li>
</ul>
<div class="tab-pane fade" [id]="'B' + cObj">
..//
<a [attr.href]="'#C' + cObj" data-toggle="tab">
<img...>
..//
I tried with [class.active] =" false "using it in various ways, for example [ '#B' + cObj.class.active] =" false "so but I can not, anything to help me.
我尝试以[class.active] =" false "各种方式使用它，例如[ '#B' + cObj.class.active] =" false "，但我不能，任何帮助我的东西。
I would like to be able to activate and deactivate the tab, switching from one to another, I'm sorry for my bad English I hope you understand my question
我希望能够激活和停用选项卡，从一个切换到另一个，对不起，我的英语不好希望你理解我的问题
UPDATE:I'm solved using the following.
更新：我使用以下方法解决了。
Perhaps the response from users help others better:
或许用户的回应能更好地帮助他人：
<ul class="nav nav-tabs">
<li class="nav active" [id]="'IDA' + contadorObjet.name" [class.active]="testLocation1() == ('A' + contadorObjet.name) || '10'" > <a [attr.href]="'#A' + contadorObjet.name" data-toggle="tab"> Info </a></li>
<li class="nav" [id]="'IDB' + contadorObjet.name" [class.active]="testLocation1() == 'B' + contadorObjet.name"> <a [attr.href]="'#B' + contadorObjet.name" data-toggle="tab"> Info </a></li>
<li class="nav" [id]="'IDC' + contadorObjet.name" [class.active]="testLocation1() == 'C' + contadorObjet.name"> <a [attr.href]="'#C' + contadorObjet.name" data-toggle="tab"> Info </a></li>
</ul>
NOTE:'10' is ID parent for test
注意：'10' 是用于测试的 ID 父级
<a [attr.href]="'#C' + contadorObjet.name" data-toggle="tab"
#elem (click)="testLocationAct(elem.href, 'IDB' + contadorObjet.name)" >
testLocation1():string{
//alert(document.activeElement.toString().split(/#(.+)?/)[1]);
return document.activeElement.toString().split(/#(.+)?/)[1];
}
testLocationAct(test: any, test1: any){
document.getElementById(test1).classList.remove('active');
document.activeElement = test;
}
UPDATE:
更新：
Can you add a plunker to this. I am trying a side bar data-toggle and it is not working – Gary
你能为此添加一个plunker吗？我正在尝试侧栏数据切换，但它不起作用 – Gary
before it worked well for what I wanted it, after posting this, I made some changes now works better (I think).
在它对我想要的效果很好之前，在发布这个之后，我做了一些改变现在效果更好（我认为）。
<div class="container" *ngFor="#contadorObjeto of contadorObjetos ; #contadorObjetoI = index" nginit="test='#' id=10">
<ul class="nav nav-tabs">
<li class="nav active" [id]="'IDA' + contadorObjeto.name" ([class.active])="testLocation1() == ('A' + contadorObjeto.name) || '10'"> <a [attr.href]="'#A' + contadorObjeto.name" data-toggle="tab"> Info </a></li>
<li class="nav" [id]="'IDB' + contadorObjeto.name" ([class.active])="testLocation1() == 'B' + contadorObjeto.name"> <a [attr.href]="'#B' + contadorObjeto.name" data-toggle="tab"> Info </a></li>
<li class="nav" [id]="'IDC' + contadorObjeto.name" ([class.active])="testLocation1() == 'C' + contadorObjeto.name"> <a [attr.href]="'#C' + contadorObjeto.name" data-toggle="tab"> Info </a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" [id]="'A' + contadorObjeto.name">Content inside tab A
{{ contadorObjeto.name }}
</div>
<div class="tab-pane fade in " [id]="'B' + contadorObjeto.name">Content inside tab B
<a [attr.href]="'#C' + contadorObjeto.name" data-toggle="tab" #elem (click)="testLocationAct(elem.href, 'IDB' + contadorObjeto.name)" >
<img class="img-responsive"
height = "230" width = "230"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/200px-Free_logo.svg.png" />
</a>
</div>
<div class="tab-pane fade in " [id]="'C' + contadorObjeto.name">Content inside tab C
</div>
</div>
</div>
testLocation1():string{
//alert(document.activeElement.toString().split(/#(.+)?/)[1]);
return document.activeElement.toString().split(/#(.+)?/)[1];
}
testLocationAct(test: any, test1: any){
liNavID = "ID" + test.toString().split(/#(.+)?/)[1];
document.getElementById(test1).classList.remove('active');
document.getElementById(liNavID).classList.add('active');
//console.log(liNavID);
}
I have adapted the sample, the new code to make it look similar to the previous.You can click on the image inside the tab 2 to test.
我已经修改了示例，新代码使其看起来与之前的相似。您可以单击选项卡 2 内的图像进行测试。
I hope to help you.
我希望能帮助你。
回答by Thierry Templier
I would create an array containing all your nav elements. A nav element would have an active property.
我会创建一个包含所有导航元素的数组。导航元素将具有活动属性。
You nav elements would be created with a loop:
您将使用循环创建导航元素：
<ul class="nav nav-tabs">
<li *ngFor="#tab of tabs" class="nav active"
[ngClass]="{active:tab.active}">
<a> Info </a></li>
</ul>
When you click on a nav you will execute this method
当您单击导航时，您将执行此方法
selectNav(nav) {
this.navs.forEach((nav) => {
nav.active = false;
});
nav.active = true;
}
This method will be linked to nav elements like this:
此方法将链接到如下导航元素：
<ul class="nav nav-tabs">
<li ngFor="#tab of tabs" (...)>
<a (click)="selectNav(nav)>
Info
</a>
</li>
</ul>
I think that this article could help you:
我认为这篇文章可以帮助你：
- Developing a tabs component in Angular 2 - http://blog.thoughtram.io/angular/2015/04/09/developing-a-tabs-component-in-angular-2.html
回答by Sasxa
You can do it like this (change "cObj == 'A'"to whatever you need):
您可以这样做（更改"cObj == 'A'"为您需要的任何内容）：
<li class="nav" [class.active]="cObj == 'A'"> <a [attr.href]="'#A' + cObj"> Info </a></li>
<li class="nav" [class.active]="cObj == 'B'"> <a [attr.href]="'#B' + cObj"> Info </a></li>
回答by guyoung
if using router, set .router-link-active class
如果使用路由器，请设置 .router-link-active 类
//our root app component
import {Component} from 'angular2/core'
import {RouteConfig, ROUTER_DIRECTIVES} from "angular2/router";
@Component({
template: "<h1>First component</h1>"
})
export class FirstComponent { }
@Component({
template: "<h1>Second component</h1>"
})
export class SecondComponent { }
@Component({
template: "<h1>Third component</h1>"
})
export class ThirdComponent { }
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<ul>
<li>
<a [routerLink]="['First']">First</a>
</li>
<li>
<a [routerLink]="['Second']">Second</a>
</li>
<li>
<a [routerLink]="['Third']">Third</a>
</li>
</ul>
</div>
<router-outlet></router-outlet>
`,
styles: [".router-link-active { background-color: red; }"],
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{ path: "/first", name: "First", component: FirstComponent, useAsDefault: true },
{ path: "/second", name: "Second", component: SecondComponent },
{ path: "/third", name: "Third", component: ThirdComponent }
])
export class AppComponent { }
full code: https://github.com/guyoung/GyPractice-Angular2Advanced/tree/master/apps/router_link_active
完整代码：https: //github.com/guyoung/GyPractice-Angular2Advanced/tree/master/apps/router_link_active
回答by Günter Z?chbauer
You can't have dynamically built property names. Use ngClassinstead
您不能拥有动态构建的属性名称。使用ngClass替代
<li ngClass="{'active': isActive}">
See also:
- https://angular.io/docs/ts/latest/api/common/NgClass-directive.html
- https://stackoverflow.com/a/33713824/217408
另请参阅：
- https://angular.io/docs/ts/latest/api/common/NgClass-directive.html
- https://stackoverflow.com/a/33713824/217408
回答by Akshata Seetharam
constructor() { }
tab: number;
ngOnInit() {
this.tab = 1;
}
selectTab(id){
this.tab = id;
}
activeTab(num){
return this.tab === num;
}
<ul class="clearfix">
<li (click)="selectTab(1)" [ngClass]="{active: activeTab(1)}">
<span>Messages</span>
</li>
<li (click)="selectTab(2)" [ngClass]="{active: activeTab(2)}">
<span>Profile</span>
</li>
<li (click)="selectTab(3)" [ngClass]="{active: activeTab(3)}">
<span>Activity</span>
</li>
</ul>
<div class="tab-content">
<div class="animated fadeIn" *ngIf="tab === 1">
Content 1
</div>
<div class="animated fadeIn" *ngIf="tab === 2">
Content 2
</div>
<div class="animated fadeIn" *ngIf="tab === 3" >
Content 3
</div>
</div>
