Select a specific Tab in Tabs

[5c0rp264]

Hello everyone, First of all thank you olton for making this great library.

I am currently developping a website and I need to be able, in Javascript, to switch from tab to tab. There is no example of code for doing so on the component documentation : https://metroui.org.ua/tabs.html

Is that something not implemented (yet ?) ?

Have a nice day :)

[xscode-auto-reply[bot]]

Thanks for opening a new issue. The author has been notified and will review it as soon as possible. For urgent issues and priority support, visit https://xscode.com/olton/Metro-UI-CSS or Patreon

[5c0rp264]

As it might help you to "patch" or others to use the code :
Using the JQuery selector and click function doesn't trigger the change of tab by Metro.

However, using bare js does :

HTML :

<ul data-role="tabs" data-expand="true" data-tabs-type="group">
        <li><a href="#drawing" id="tabDrawing">Drawing</a></li>
        <li><a href="#general" id="tabGeneral">Room settings</a></li>
        <li><a href="#editor" id="tabEditor" class="disabled">Editor</a></li>
</ul>

JS :

var button = document.getElementById("tabDrawing");
button.click();

[olton]

You must use API method open(tabNumber || Element)

<ul id="myTabs" data-role="tabs" data-expand="true" data-tabs-type="group">
        <li><a href="#drawing" id="tabDrawing">Drawing</a></li>
        <li><a href="#general" id="tabGeneral">Room settings</a></li>
        <li><a href="#editor" id="tabEditor" class="disabled">Editor</a></li>
</ul>

var tabs = Metro.getPlugin("#myTabs", "tabs")
tabs.open(1) // open by nuber

or

var tabs = Metro.getPlugin("#myTabs", "tabs")
tabs.open("#tabDrawing") // open by element