Use 2 different Tabbar / switch doesn't work


#1

Hi there,

I try to use 2 different tabbar for my app but it doesn’t works.

Here the structure of my app :

#main-view (no tabbar no navbar)
#view-1-1
#view-1-2
#view-2-1
#view-2-2

I would like to have 1 tabbar for view #view-1-1 and #view-1-2 and another tabbar for #view-2-1 and #view-2-2
I put display:none on my 2 tabbar at the openning app.

I show tabbar 1 when I choose to see #view-1-1
I show tabbar 2 and hide tabbar 1 when I choose to see #view-2-1
But the link on tabbar doesn’t works.

My index.html :

      <div class="toolbar tabbar-labels toolbar-bottom-md" id="menu_foot_1" style="display:none;">
        <div class="toolbar-inner">
          <a href="#view-1-1" class="tab-link tab-link-active">
            <i class="icon f7-icons ios-only">home</i>
            <i class="icon f7-icons ios-only icon-ios-fill">home_fill</i>
            <i class="icon material-icons md-only">home</i>
            <span class="tabbar-label">TAB PRO 1</span>
          </a>
          <a href="#view-1-2" class="tab-link">
            <i class="icon f7-icons ios-only">list</i>
            <i class="icon f7-icons ios-only icon-ios-fill">list_fill</i>
            <i class="icon material-icons md-only">view_list</i>
            <span class="tabbar-label">TAB 1-2</span>
          </a>
        </div>
      </div>

      <div class="toolbar tabbar-labels toolbar-bottom-md" id="menu_foot_2" style="display:none;">
        <div class="toolbar-inner">
          <a href="#view-2-1" class="tab-link tab-link-active">
            <i class="icon f7-icons ios-only">home</i>
            <i class="icon f7-icons ios-only icon-ios-fill">home_fill</i>
            <i class="icon material-icons md-only">home</i>
            <span class="tabbar-label">TAB 2-1</span>
          </a>
          <a href="#view-2-2" class="tab-link">
            <i class="icon f7-icons ios-only">list</i>
            <i class="icon f7-icons ios-only icon-ios-fill">list_fill</i>
            <i class="icon material-icons md-only">view_list</i>
            <span class="tabbar-label">TAB 2-2</span>
          </a>
          
        </div>
      </div>

<div id="view-home" class="view view-main tab tab-active">
    <div class="page" data-name="home">
      <div class="page-content">
        <div class="list">
          <ul>
            <li>
              <a href="#view-1-1" class="item-content item-link display_1_footer">
                <div class="item-inner">
                  <div class="item-title">LINK TO VIEW 1-1</div>
                </div>
              </a>
            </li>
            <li>
              <a href="#view-2-1" class="item-content item-link display_2_footer">
                <div class="item-inner">
                  <div class="item-title">LINK TO VIEW 2-1</div>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div id="view-1-1" class="view tab">
   <div class="page" data-name="1-1">
    <div class="navbar">
      <div class="navbar-inner sliding">
	     <div class="left">
            <a href="/view-2-1/" class="switchTo2">
              Switch to 2-1
            </a>
          </div>
      <div class="title">VIEW 1-1</div>
     </div>
   </div>
     <div class="page-content">
     </div>
    </div>

  </div>

  <div id="view-1-2" class="view tab">
  <div class="page" data-name="1-2">
    <div class="navbar">
      <div class="navbar-inner sliding">
	     <div class="left">
            <a href="/view-2-1/" class="switchTo2">
              Switch to 2-1
            </a>
          </div>
      <div class="title">VIEW 1-2</div>
     </div>
   </div>
     <div class="page-content">
     </div>
    </div>
  </div>

  <div id="view-2-1" class="view tab">
   <div class="page" data-name="2-1">
    <div class="navbar">
      <div class="navbar-inner sliding">
	     <div class="left">
            <a href="/view-1-1/" class="switchTo1">
              Switch to 1-1
            </a>
          </div>
      <div class="title">VIEW 2-1</div>
     </div>
   </div>
     <div class="page-content">
     </div>
    </div>
  </div>

   <div id="view-2-2" class="view tab">
    <div class="page" data-name="2-2">
    <div class="navbar">
      <div class="navbar-inner sliding">
	     <div class="left">
            <a href="/view-1-1/" class="switchTo1">
              Switch to 1-1
            </a>
          </div>
      <div class="title">VIEW 2-2</div>
     </div>
   </div>
     <div class="page-content">
     </div>
    </div>
  </div>

My app.js :

$$(document).on('click', '.display_1_footer', function (e) {

$$(’#menu_foot_2).hide();
$$(’#menu_foot_1’).show();

});

$$(document).on('click', '.display_2_footer', function (e) {
$$('#menu_foot_1').hide();
$$('#menu_foot_2').show();

});

$$(document).on('click', '.switchTo2, function (e) {

   $$('#menu_foot_1').hide();
   $$('#menu_foot_2').show();

});

$$(document).on('click', '.switchTo1', function (e) {

$$(’#menu_foot_1’).show();
$$(’#menu_foot_2’).hide();

});

An idea to helping me ?

Thank you :slight_smile: