Twitter bootstrap 如何激活或不激活（导航选项卡）引导Twitter（角度2）

我有一个导航，Twitter引导，在一个选项卡

（#B..）

，我有一个图像，点击它会改变到另一个选项卡

（#C..）

我可以更改该选项卡，但我无法更改，因为新选项卡

（#C..）

已设置为活动。其中，此图片选项卡

（#B..）

设置为停用。（例如removeClass处于活动状态）

---

注：“10”是测试的父ID

---

更新：

---

你能在这上面加一个弹夹吗。我正在尝试侧栏数据切换和 这不起作用——加里

在它为我想要的东西工作之前，在发布这篇文章之后，我做了一些修改，现在效果更好了（我想）

选项卡A内的内容
{{contadorObjeto.name}
选项卡B内的内容
选项卡C内的内容

---

我已经修改了示例，新的代码使其看起来与以前的相似。您可以单击选项卡2内的图像进行测试

---

我希望能帮助您。

您不能动态生成属性名。改用

ngClass

    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;
    }

另请参见：
-

---

-我将创建一个包含所有导航元素的数组。导航元素将具有活动属性

您可以使用循环创建导航元素：

    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);
    }

此方法将链接到如下导航元素：

<ul class="nav nav-tabs">
  <li *ngFor="#tab of tabs" class="nav active"
      [ngClass]="{active:tab.active}">
    <a> Info </a></li>
</ul>

您可以这样做（将
“cObj=='A'”
更改为您需要的任何内容）：



如果使用路由器，请设置路由器链接活动类

<ul class="nav nav-tabs">
  <li ngFor="#tab of tabs" (...)>
    <a (click)="selectNav(nav)>
      Info
    </a>
  </li>
</ul>

//我们的根应用程序组件
从'angular2/core'导入{Component}
从“angular2/ROUTER”导入{RouteConfig，ROUTER_指令}；
@组成部分({
模板：“第一个组件”
})
导出类FirstComponent{}
@组成部分({
模板：“第二个组件”
})
导出类SecondComponent{}
@组成部分({
模板：“第三部分”
})
导出类ThirdComponent{}
@组成部分({
选择器：“我的应用程序”，
提供者：[]，
模板：`


constructor（）{}
选项卡：编号；
恩戈尼尼特（）{
这个.tab=1；
}
选择标签（id）{
this.tab=id；
}
活动选项卡（num）{
返回this.tab==num；
}



信息


轮廓


活动


内容1
内容2
内容3
很好的解决方案。谢谢！你能给这个添加一个插销吗？我正在尝试一个侧栏数据切换，但它不是working@Gary你可以通过plunker观看更新，我希望这会对你有所帮助谢谢。这应该会有帮助。我使用了没有[id]的id和没有[attr.href]的href它也适用于导航折叠。它给出了带[]方括号的模板的解析错误。谢谢。答案有点不清楚：（这可能可行，但很难理解，但您应该解释一下为什么要这样做。请确保代码片段确实有效，否则只需将其格式化为代码。
<li ngClass="{'active': isActive}">

<ul class="nav nav-tabs">
  <li *ngFor="#tab of tabs" class="nav active"
      [ngClass]="{active:tab.active}">
    <a> Info </a></li>
</ul>

selectNav(nav) {
  this.navs.forEach((nav) => {
    nav.active = false;
  });
  nav.active = true;
}

<ul class="nav nav-tabs">
  <li ngFor="#tab of tabs" (...)>
    <a (click)="selectNav(nav)>
      Info
    </a>
  </li>
</ul>

<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>

//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 { }