Adding 'tab-active' for animated tabs does not make tab visible by default

Questions
1

Hi, all.

I have the following layout for page-content (partly). It is copy-pasted sample from docs.

I assume that tab3 will be active by default when my page is opened, but it is not. Can’t figure out what am I doing wrong. Could anybody help?

<div class="page-content">
                <div class="block">
                    <a href="#tab1" class="tab-link">Tab 1</a>
                    <a href="#tab2" class="tab-link">Tab 2</a>
                    <a href="#tab3" class="tab-link tab-link-active">Tab 3</a>
                </div>

                <div class="tabs-animated-wrap">

                    <!-- Tabs, tabs wrapper -->
                    <div class="tabs">
                        <!-- Tab 1, active by default -->
                        <div id="tab1" class="tab ">
                            ... Tab 1 content ...
                        </div>

                        <!-- Tab 2 -->
                        <div id="tab2" class="tab">
                            ... Tab 2 content ...
                        </div>

                        <!-- Tab 3 -->
                        <div id="tab3" class="tab tab-active">
                            ... Tab 3 content ...
                        </div>
                    </div>
                </div>
            </div>

Full code can be found in this repo: https://github.com/contfedorov/f7-issues/tree/set_active_tab

2

Could be a bug, as a temporary workaround you can just call:

app.tab.show('#tab-3', false)

on this pageInit

3

Thanks, that’s possible.
By the way, app.tab.show('#tab3', false) does not work for this particular layout, when #tab3 has tab-active class, but works well otherwise.

Will wait for fix. Should I create an issue in GitHub for this?

4

Saw you’ve added a patch to fix this! Thanks very much!