2017-02-15 2 views
0

Ich habe diese plunkr,AngularJS - nicht in der Lage Registerkarte zeigt auf dem Registerkarte klicken

http://plnkr.co/edit/AEYQpvmjUR6DUq2jtYid?p=preview

Teil meines HTML-Code:

<body ng-app="App" ng-controller="mainController"> 
    <form name="myForm1" style="align-content:center;"> 
     <div id="divTabs" > 
     <h4>CMA Analysis/Assessment</h4> 
     <ul class="nav nav-tabs" id="tabs" style="border-bottom: none;"> 
      <li class="active"> 
      <a data-toggle="tab" href="#AwarenessMenu">Awareness</a> 
      </li> 
      <li> 
      <a data-toggle="tab" href="#UnderstandingMenu">Understanding</a> 
      </li> 
      <li> 
      <a data-toggle="tab" href="#AcceptanceMenu">Acceptance</a> 
      </li> 
      <li> 
      <a data-toggle="tab" href="#CommitmentMenu">Commitment</a> 
      </li> 
      <li> 
      <a data-toggle="tab" href="#AdvocacyMenu">Advocacy</a> 
      </li> 
      <li class="next-tab"> 
      <a href="">Next ></a> 
      </li> 
     </ul> 
     </div> 
     <div id="divAlltabContent" class="tab-content" > 
     <div id="AwarenessMenu" class="tab-pane fade in active"> 
       AwarenessMenu 
      </div> 
     <div id="UnderstandingMenu" class="tab-pane fade in active"> 
       UnderstandingMenu 
      </div> 
     <div id="AcceptanceMenu" class="tab-pane fade in active"> 
       AcceptanceMenu 
      </div> 
     <div id="CommitmentMenu" class="tab-pane fade in active"> 
       CommitmentMenu 
      </div> 
     <div id="AdvocacyMenu" class="tab-pane fade in active"> 
       AdvocacyMenu 
      </div> 
     </div> 
    </form> 
    </body> 

Problem ist, dass ich in meiner Anwendung in der Lage bin zu klicken nächste Schaltfläche, um die Tabs zu navigieren, aber wenn ich auf den "Tab" z. B. Verstehen, wird der Bildschirm leer.

Wie es auf meine Anwendung läuft:

  1. ich auf CMA Registerkarte klicken. Beim Klicken werden die Registerkarten "Bewusstsein", "Verständnis", "Akzeptanz" ... angezeigt. Standardmäßig werden nur die Inhalte von Awareness angezeigt (aber nicht in plunkr, nicht sicher warum, es zeigt alles).

  2. Bei einem Klick auf nächste ich die Tabs ohne Aktualisierung der Seite navigieren können (in plunkr nicht navigieren können: /)

eigentliche Frage: Ich muss auf jedem Tab klicken, um in der Lage zu zeigen, der Inhalt der angeklickten Registerkarte Next Button sollte auch funktionieren. Würde mich sehr über diese Hilfe freuen.

ich hinzugefügt, durch die js in plunkr statt Referenzen, weil es nicht richtig funktioniert.

Antwort

2

Sie benötigen

href="#AwarenessMenu" 

zu

data-target="#AwarenessMenu" 
+0

Lassen Sie mich versuchen, ganz schnell – Sak

+0

Danke ..................... – Sak

+0

Es sagt, dass ich 3 Minuten annehmen kann. – Sak

-1

Sie haben die Strecke zu verstehen, wenn ng-Ansicht, dies zu tun.

+0

dies keine Antwort –

+0

ok könnte sich ändern, so empfiehlt Ihnen, was die Antwort sein könnte? –

+0

Ihre Worte, "Sie müssen die Route zu verstehen, wenn, ng-view für das tun" als ein Kommentar, keine Antwort. –

Verwandte Themen