CODEWITHSUNDEEP
javascriptjqueryhtmlangularjstabs
Akshay
Akshay

Reputation: 1472

Angularjs - unable to show tab on tab click

I have this plunkr,

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

Part of My 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 is that in my application I am able to click next button to navigate the tabs but when I click on the "tab" e.g Understanding, screen goes blank.

How it runs on my application:

  1. I can click on CMA tab. On click, the Awareness, understanding, acceptance ... tabs are shown. By default only Awareness's contents are shown (but not in plunkr, not sure why, it is showing everything).

  2. On click on next I can navigate the tabs without any page refresh (cannot navigate in plunkr :/)

Real question: I need to be able to click on any tab to show the content of the clicked tab. Next button should also work. Would appreciate a lot for help on this.

I added the full js in plunkr instead of references because it wasn't working properly.

Upvotes: 0

Views: 654

Answers (2)

Indhu
Indhu

Reputation: 399

You need to change 

href="#AwarenessMenu"

to

data-target="#AwarenessMenu"

Upvotes: 2

amar jain
amar jain

Reputation: 1

You have to understand the route,when,ng-view for doing this.

Upvotes: -1

Related Questions