0

I've used to create tabs with some content on it using the following code:

    <div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
    <div class="tabs">
      <a class="tab-item active" href="#">
        <i class="icon ion-home"></i>
        Test
    <div class="item item-avatar">
      <div ng-bind="profile.img_element"></div>
    <h2 ng-bind="profile.name"></h2>
    <p ng-bind="profile.points"></p><p> points</p> 

    </div>
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>

However, my problem is that the tabs doesn't switch, and on the top of that I've been unable to set the content of the tab 'Test' properly.

I did some searches, but still didn't find a solution.

I don't have enough experience with Ionic, So any help will be much appreciated.

Thank you.

user6039980
  • 3,108
  • 8
  • 31
  • 57

1 Answers1

1
href="#" should not be '#' for every tab. '#' means default root url. So when you click on every page it redirect on same page. You need to set content using 'ion-nav-view' for tab view.

Please study this CodePen for more guid

NiRmaL
  • 2,866
  • 1
  • 18
  • 15
  • I copied some code from the one you suggested: but I got "Failed to load resource: the server responded with a status of 404 (Not Found)" for the tab linked html files. – user6039980 May 30 '16 at 13:17
  • Can you update a more code including html file and routing or create codepen so I can check it and help you. – NiRmaL May 31 '16 at 04:49
  • I solved all the problems: after fixing many bugs in my app. Your code is helpful. Thank you. – user6039980 Jun 01 '16 at 00:01