framework7

Open full view…

Tab links in side panel do not update tab component visually

wetfeet
Fri, 11 Aug 2017 05:55:48 GMT

I have a tab bar design app, and I also added a panel with links to the tabs. Pretty much like the Google Play app. The active tab can be selected by the user by: 1. Tapping on the tab component in the main screen -OR- 2. Sliding the side panel open and then tapping on a list item corresponding to a tab I have declared the side panel as below: ``` <div class="panel panel-left panel-cover"> <div class="list-block"> <ul> <!-- Menu Item to Tab 1 --> <li> <a href="#tab-1" class="tab-link close-panel"> <div class="item-content"> <div class="item-media"> <i class="icon icon-f7"></i> </div> <div class="item-inner"> <div class="item-title">Tab 1</div> </div> </div> </a> </li> <!-- Menu Item to Tab 2 --> <li> <a href="#tab-2" class="tab-link close-panel"> <div class="item-content"> <div class="item-media"> <i class="icon icon-f7"></i> </div> <div class="item-inner"> <div class="item-title">Tab 2</div> </div> </div> </a> </li> <ul> </div> </div> ``` Note that I added the `tab-link` class to the panel list item to get it to switch the tab. When I use these list item in the panel to change the tab, the tab page content will change correctly. However, the tab component above in the tab bar would not update itself visually. For example, the text label does not highlight itself and underline does not appear even though the tab content has changed.