Tengo un nav, Twitter Bootstrap, dentro de uno de la ficha (#B ..), tengo una imagen que al pulsar en él se cambia a otra pestaña (#C ..).

Puedo cambiar esa pestaña, pero no puedo, que la nueva ficha (#C ..) está activa. Y donde esta la foto de la ficha (#B ..) está configurado para desactivar. (por ejemplo removeClass activo)

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

He probado con [class.active] =" false " el uso de diversos modos, por ejemplo [ '#B' + cObj.class.active] =" false " así, pero no puedo, algo que me ayude.

Me gustaría ser capaz de activar y desactivar la ficha, el cambio de uno a otro, lo siento por mi mal inglés espero que entiendan mi pregunta


ACTUALIZACIÓN: estoy resuelto mediante el siguiente.

Tal vez la respuesta de los usuarios de ayudar mejor a los demás:


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

NOTA: el’10’ es el IDENTIFICADOR de los padres para la prueba


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

ACTUALIZACIÓN:

Puede agregar un plunker a este. Estoy tratando de un lado de la barra de datos-activar y
no es de trabajo – Gary

Plunker

antes funcionaba bien para lo que yo quería, después de este anuncio, he hecho algunos cambios ahora funciona mejor (creo).

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

He adaptado de la muestra, el nuevo código para que se vea similar a la anterior.Puede hacer clic en la imagen dentro de la ficha 2 para probar.

Espero ayudarte.

  • Se puede añadir un plunker a este. Estoy tratando de un lado de la barra de datos de alternar y no está funcionando
  • usted puede ver la actualización con plunker espero que te ayude
  • gracias. Esto debería ayudar.
  • he utilizado id sin [id] y href sin [attr.href] y que trabajó para la navegación se derrumba tan bien. se estaba dando errores de análisis para las plantillas con corchetes []. gracias.
InformationsquelleAutor Angel Angel | 2016-02-22

5 Comentarios

  1. 5

    Me gustaría crear un array que contiene todos sus nav elementos. Un nav elemento tiene un activo de propiedad.

    Usted nav elementos podría ser creado con un bucle:

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

    Cuando usted haga clic en un nav va a ejecutar este método

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

    Este método será vinculado a nav elementos como este:

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

    Creo que este artículo puede ayudarle a:

    • la respuesta es poco clara 🙁 esto podría funcionar, pero difícil de entender
  2. 2

    Usted puede hacer esto de esta manera (cambio "cObj == 'A'" para lo que necesites):

    <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>
  3. 2

    si el uso de router, set .router-link-clase activa

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

    código completo: https://github.com/guyoung/GyPractice-Angular2Advanced/tree/master/apps/router_link_active

    • Buena solución.Gracias !
  4. -1
    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>
    • Usted debe explicar un poco por qué lo hizo. Y por favor, asegúrese de que el código de fragmentos de realidad, de trabajo, de lo contrario solo formato como código.

Dejar respuesta

Please enter your comment!
Please enter your name here