Hi, I have a similar question to this post
The response was to use the ‘tHeighlight’ method, so I setup a click handler for my tabs where I pass over the class specific to each tab as shown below
$$(document).on("click",".tab-link",function(){
//remove active state
$$(".tab-link").removeClass("tab-link-active");
var dataPage = ".bottomBtn-" + $$(this).data("page");
app.toolbar.setHighlight("dataPage");
})
I know the dataPage variable is getting the right class name however when I pass it to the toolbar highlight nothing happens. I don’t get any errors etc.
Here is my tabbar code as well (it looks ok in the app so I think the placement is correct)
<div class="toolbar tabbar tabbar-labels toolbar-bottom mytoolbar">
<div class="toolbar-inner">
<a href="#" class="tab-link bottomBtn-back" data-page="back">
<!-- Different icons for iOS and MD themes -->
<i class="icon material-icons md-only">email</i>
<!-- Label text -->
<span class="tabbar-label">Back</span>
</a>
<a href="#" class="tab-link bottomBtn-scan" data-page="scan">
<i class="icon material-icons md-only">today<span class="badge color-red">5</span></i>
<span class="tabbar-label">Scan</span>
</a>
<a href="#" class="tab-link bottomBtn-fav" data-page="fav">
<i class="icon material-icons md-only">file_upload</i>
<span class="tabbar-label">Favs</span>
</a>
<a href="#" class="tab-link bottomBtn-alert" data-page="alert">
<i class="icon material-icons md-only">file_upload</i>
<span class="tabbar-label">Alerts</span>
</a>
<a href="pages/settings.html" class="tab-link bottomBtn-config" data-page="config">
<i class="icon material-icons md-only">file_upload</i>
<span class="tabbar-label">config</span>
</a>
<a href="#" class="tab-link tab-link-active bottomBtn-home" data-page="home">
<i class="icon material-icons md-only">file_upload</i>
<span class="tabbar-label">Home</span>
</a>
</div>