Ionic: I'm unable to create tabs properly

Question

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.

Answer 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