如何激活(nav选项卡)Bootstrap Twitter(Angular 2)

Question

我有一个导航,Twitter Bootstrap,在其中一个标签内(#B ..),我有一个图像,点击它更改为另一个标签(#C ..).

我可以更改该选项卡,但我不能,新选项卡(#C ..)设置为活动状态.并且此图片选项卡(#B ..)设置为停用.(例如removeClass active)

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

我尝试过以[class.active] =" false "各种方式使用它,例如[ '#B' + cObj.class.active] =" false ",但我不能,有什么可以帮助我的.

我希望能够激活和停用标签,从一个切换到另一个,我很抱歉我的英语不好我希望你理解我的问题

---

更新:我使用以下内容解决了.

也许用户的回应可以更好地帮助他人:

• 蒂埃里·泰普尔

• Sasxa

• GünterZöchbauer

---

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

注意:'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;
    }

更新:

你可以添加一个plunker吗？我正在尝试侧边栏数据切换,它不起作用 - 加里

Plunker

在它发布之前它能够很好地发挥作用之后,我做了一些改动,现在效果更好(我想).

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

我已经调整了样本,新代码使其看起来与之前类似.您可以单击选项卡2内的图像进行测试.

我希望能帮助你.

Answer 1

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

您的nav元素将创建一个循环：

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

我认为这篇文章可以为您提供帮助：

• 在Angular 2中开发选项卡组件-http: //blog.thoughtram.io/angular/2015/04/09/developing-a-tabs-component-in-angular-2.html

Answer 2

您不能动态构建属性名称。改用ngClass​

<li ngClass="{'active': isActive}">

另请参阅：
- https://angular.io/docs/ts/latest/api/common/NgClass-directive.html
- /sf/answers/2359967711/