Set Active Tabbar on Current Page

Questions
1

Hi… I have problem and already searching for a day. Stil don’t get the solution. I need to set tab-link-active on my code like below. Please anybody help. And this is my code:

<div class="toolbar toolbar-bottom-md tabbar tabbar-labels">
            <div class="toolbar-inner">
                <a href="/notifikasi" class="tab-link">
                    <i class="icon f7-icons ios-only">data</i>
                    <i class="icon material-icons md-only">widgets</i>
                    <span class="tabbar-label">Notifikasi</span>
                </a>
                <a href="/home" class="tab-link tab-link-active">
                    <i class="icon f7-icons ios-only">home</i>
                    <i class="icon material-icons md-only">home</i>
                    <span class="tabbar-label">Home</span>
                </a>
                <a href="/faq" class="tab-link">
                    <i class="icon f7-icons ios-only">collection</i>
                    <i class="icon material-icons md-only">view_carousel</i>
                    <span class="tabbar-label">FAQ</span>
                </a>
            </div>
        </div>

So when I click on <a href="/faq" for example, so it set tab-link-active for /faq. I stil new on this.

1 Like
2

Using a function set in onclick attribute.

Function ontap(t)
{
if (t == ‘nameoftab’)
{
//add class active-tab and remove class
active-tab from others tab links using
query selector
}
}

In your html

<a @click=ontab(‘tabdata’) href="/notifikasi" class=“tab-link”>
data
widgets
Notifikasi