Tab Content Cant load dynamically.This is tabs inside a page. Where have i gone wrong?

1 
  2. <div class="views tabs ios-edges">

  3.   <!-- Tabbar for switching views-tabs -->

  4.   <div class="toolbar tabbar-labels toolbar-tob-md">

  5.     <div class="toolbar-inner">

  6.       <a href="#view-home" class="tab-link tab-link-active">

  7.         <i class="icon f7-icons ios-only">home</i>

  8.         <i class="icon f7-icons ios-only icon-ios-fill">home_fill</i>

  9.         <i class="icon material-icons md-only">home</i>

  10.         <span class="tabbar-label">Home</span>

  11.       </a>

  12.       <a href="#view-catalog" class="tab-link">

  13.         <i class="icon f7-icons ios-only">list</i>

  14.         <i class="icon f7-icons ios-only icon-ios-fill">list_fill</i>

  15.         <i class="icon material-icons md-only">view_list</i>

  16.         <span class="tabbar-label">Catalog</span>

  17.       </a>

  18.       <a href="#view-settings" class="tab-link">

  19.         <i class="icon f7-icons ios-only">settings</i>

  20.         <i class="icon f7-icons ios-only icon-ios-fill">settings_fill</i>

  21.         <i class="icon material-icons md-only">settings</i>

  22.         <span class="tabbar-label">Settings</span>

  23.       </a>

  24.     </div>

  25.   </div>

  29.   <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->

  30.   <div id="view-home" class="view view-main tab tab-active">

  31.     <!-- Page, data-name contains page name which can be used in page callbacks -->

  32.     <div class="page" data-name="home">

  33.       <!-- Top Navbar -->

  35.       <!-- Scrollable page content-->

  36.       <div class="page-content">

  37.         <div class="block block-strong">

  38.           <p>Each tab/view may have different layout, different navbar type (dynamic, fixed or static) or without navbar like this tab.</p>

  39.         </div>

  40.         <div class="list">

  41.           <ul>

  42.             <li>

  43.               <a href="/about/" class="item-content item-link">

  44.                 <div class="item-inner">

  45.                   <div class="item-title">About</div>

  46.                 </div>

  47.               </a>

  48.             </li>

  49.           </ul>

  50.         </div>

  51.         <div class="block-title">Modals</div>

  52.         <div class="block block-strong">

  53.           <div class="row">

  54.             <div class="col-50">

  55.               <a href="#" class="button button-raised button-fill popup-open" data-popup="#my-popup">Popup</a>

  56.             </div>

  57.             <div class="col-50">

  58.               <a href="#" class="button button-raised button-fill login-screen-open" data-login-screen="#my-login-screen">Login Screen</a>

  59.             </div>

  60.           </div>

  61.         </div>

  62.       </div>

  63.     </div>

  64.   </div>

  65.   <!-- Catalog View -->

  66.   <div id="view-catalog" class="view tab">

  67.     <!-- Catalog page will be loaded here dynamically from /catalog/ route -->

  68.   </div>

  69.   <!-- Settings View -->

  70.   <div id="view-settings" class="view tab">

  71.     <!-- Settings page will be loaded here dynamically from /settings/ route -->

  72.   </div>

  73. </div>

  74. <!-- Popup -->

  76. <!-- Login Screen -->

  77. <div class="login-screen" id="my-login-screen">

  78.   <div class="view">

  79.     <div class="page">

  80.       <div class="page-content login-screen-content">

  81.         <div class="login-screen-title">Login</div>

  82.         <div class="list">

  83.           <ul>

  84.             <li class="item-content item-input">

  85.               <div class="item-inner">

  86.                 <div class="item-title item-label">Username</div>

  87.                 <div class="item-input-wrap">

  88.                   <input type="text" name="username" placeholder="Your username">

  89.                 </div>

  90.               </div>

  91.             </li>

  92.             <li class="item-content item-input">

  93.               <div class="item-inner">

  94.                 <div class="item-title item-label">Password</div>

  95.                 <div class="item-input-wrap">

  96.                   <input type="password" name="password" placeholder="Your password">

  97.                 </div>

  98.               </div>

  99.             </li>

  100.           </ul>

  101.         </div>

  102.         <div class="list">

  103.           <ul>

  104.             <li>

  105.               <a href="#" class="item-link list-button login-button">Sign In</a>

  106.             </li>

  107.           </ul>

  108.           <div class="block-footer">Some text about login information.<br>Click "Sign In" to close Login Screen</div>

  109.         </div>

  110.       </div>

  111.     </div>

  112.   </div>

  113. </div>
  • `

  • Preformatted text

  • `

    • 2

    Looks like it is default template? Where is your script, etc, provide more details