Hi!
Noob question, but I can’t seem to get tab-link-active class to work on my tabbar with labels.
I’m using webpack, should it be working if I include javascript.bundle.min.js?
Or do I need to make a javascript code that says add tab-link-active class to the code?
Thanks in advance!
Look at the kitchen sink code. It is the best guide you will find
Okay I did that, Im using webpack and I can’t get the bundle.min.js file linked…Idk why it’s not working.
Share your code here
in index.html I put script type=“text/javascript” src= “framework7.bundle.min.js” /script
in app.js I put import bundle from ‘./framework7.bundle.min.js’
still the tab is not showing when active…
Thank you for your reply btw!
Well, without proper code, we cannot figure what what you are doing wrong
`indent preformatted text by 4 spaces` <div class="view view-main view-init safe-areas " data-url="/"><div class="toolbar tabbar tabbar-labels toolbar-bottom hide">
<div class="toolbar-inner">
<a href="/home/" a class="tab-link tab-link-active">
<!-- Different icons for iOS and MD themes -->
<i class="icon f7-icons if-not-md">box_fill</i>
<i class="icon material-icons md-only">email</i>
<!-- Label text -->
<span class="tabbar-label">Zaken</span>
</a>
<a href="/nieuws/" a class="tab-link onclick-nieuws" >
<i class="icon f7-icons if-not-md">collection_fill</i>
<i class="icon material-icons md-only">today</i>
<span class="tab-link-highlight tabbar-label">Nieuws</span>
</a>
<a href="/werk-wijze/" class="tab-link ">
<i class="icon f7-icons if-not-md">briefcase_fill</i>
<i class="icon material-icons md-only">file_upload</i>
<span class="tabbar-label">Werkwijze</span>
</a>
<a href="/kennis-bank/" a class="tab-link onclick-kennis-bank ">
<i class="icon f7-icons if-not-md">book_fill</i>
<i class="icon material-icons md-only">book_fill</i>
<span class="tabbar-label">Kennisbank</span>
</a>
<a href="/meer/" class="tab-link ">
<i class="icon f7-icons if-not-md">more_fill</i>
<i class="icon material-icons md-only">file_upload</i>
<span class="tabbar-label">Meer</span>
</a>
</div>
That is my tabbar
indent preformatted text by 4 spaces <script type="text/javascript" src= "framework7.bundle.min.js"></script>
Is the link I put in the index.html script
indent preformatted text by 4 spaces. import bundle from './framework7.bundle.min.js'
Is what I put into app.js the bundle is not shown when I push on debugger in firefox.
From what I see in your code, you are putting page urls in the anchor tag of the tabbar. You should be putting the tab IDs instead. Also, be sure to have tab content in the page. I assume you do have tab content even if you did not post it in the code.
You do not need to write any extra javascript to activate a tab. Once the tab is clicked, it will automatically be activated.
See this example code from the docs. The tabbar links to tab content through the IDs of the tabs.
http://framework7.io/docs/toolbar-tabbar.html#tabbar
Try something similar to this
<div class="toolbar tabbar tabbar-labels toolbar-bottom hide">
<div class="toolbar-inner">
<a href="#tab-1" class="tab-link tab-link-active">
<!-- Different icons for iOS and MD themes -->
<i class="icon f7-icons if-not-md">box_fill</i>
<i class="icon material-icons md-only">email</i>
<!-- Label text -->
<span class="tabbar-label">Zaken</span>
</a>
<a href="#tab-2" class="tab-link onclick-nieuws" >
<i class="icon f7-icons if-not-md">collection_fill</i>
<i class="icon material-icons md-only">today</i>
<span class="tabbar-label">Nieuws</span>
</a>
<a href="#tab-3" class="tab-link ">
<i class="icon f7-icons if-not-md">briefcase_fill</i>
<i class="icon material-icons md-only">file_upload</i>
<span class="tabbar-label">Werkwijze</span>
</a>
<a href="/kennis-bank/" class="tab-link onclick-kennis-bank ">
<i class="icon f7-icons if-not-md">book_fill</i>
<i class="icon material-icons md-only">email</i>
<span class="tabbar-label">Kennisbank</span>
</a>
<a href="/meer/" class="tab-link ">
<i class="icon f7-icons if-not-md">more_fill</i>
<i class="icon material-icons md-only">file_upload</i>
<span class="tabbar-label">Meer</span>
</a>
</div>
</div>
<div class="page-content">
<div class="tabs-swipeable-wrap">
<div class="tabs">
<div id="tab-1" class="page-content tab tab-active">
Tab 1 content
</div>
<div id="tab-2" class="page-content tab">
Tab 2 content
</div>
<div id="tab-3" class="page-content tab">
Tab 3 content
</div>
</div>
</div>
</div>Okay thank you for replying!
So what about the pages I created then? I want to use the tabbar as a navigation menu to the different pages I set. I have the understanding that I’m doing it wrong and should stay on index.html at all times. Is that right?
Put the pages inside the tabs, where you see Tab 1 Content, Tab 2 Content etc
Were you able to get the Kitchen Sink running on your machine?
When I do that I see “page one content” “page two content” on my index.html.
I’ll leave it for now, then that won’t work 
yes I got it running! but it did not really help me (yet) I’ll look more into that for sure!
Thank you for your reply
Btw, if I do everything right, should everything work javascript wise?
Well, am not sure what exactly you mean by “everything working javascript wise”, but the tabs will work without you writing any javascript code.
If you want more functionality, you will need to write some code.
I got the same issue… I set tabbar for navigation, and when I click on the page, how to make
tab-link-active on current page. My question relate to this Set Active Tabbar on Current Page. Please help, I need this.