Solved: Wrong Tab is highlighting (Tab1 is heighlighting insted of Tab4 on app load)

Questions
1

I am using the following code. Though the content is showing correctly of tab 4 but as the app loads Tab1 is heighlighted insted of Tab4. Please help.

        <f7-toolbar tabbar>
            <f7-link tab-link="#tab1">Tab1</f7-link>
            <f7-link tab-link="#tab2">Tab2</f7-link>
            <f7-link tab-link="#tab3">Tab3</f7-link>
            <f7-link tab-link="#tab4">Tab4</f7-link>
        </f7-toolbar>
        <f7-tabs>
            <f7-tab id="tab1">Tab1 content</f7-tab>
            <f7-tab id="tab2">Tab2 conten</f7-tab>
            <f7-tab id="tab3">Tab3 conten</f7-tab>
            <f7-tab id="tab4" tab-active>Tab4 conten</f7-tab>
        </f7-tabs>
2

You also need to add related prop for active link:

<f7-link tab-link="#tab4" tab-link-active>Tab4</f7-link>
1 Like