Loading...
Add a class to each tab button navigation, for example, if we want to use anchor #one, then add the class tab-hash-one, then add the javascript below, then try accessing it with a direct link, for example to https://digitalizer.my.id/tabs/#one
document.addEventListener("DOMContentLoaded", function() {
// small delay to let Oxygen render tabs
setTimeout(function() {
var hash = window.location.hash.substring(1);
if (!hash) return;
// First try: find a tab button with class "tab-hash-<hash>"
var btn = document.querySelector('.tab-hash-' + CSS.escape(hash));
if (btn) {
btn.click();
// optional: scroll to tab area
btn.scrollIntoView({behavior: 'smooth'});
return;
}
// Fallback: find a tab content pane with matching id
var pane = document.getElementById(hash);
if (!pane) return;
// Try to find its tabs container
var tabsWrapper = pane.closest('.oxy-tabs');
if (!tabsWrapper) return;
// Get all panes and all tab-buttons inside that wrapper
var panes = Array.from(tabsWrapper.querySelectorAll('.oxy-tabs-content, .oxy-tab-content, .oxy-tabs-contents > *'));
var buttons = Array.from(tabsWrapper.querySelectorAll('.oxy-tabs-tab, .oxy-tab'));
var idx = panes.indexOf(pane);
if (idx >= 0 && buttons[idx]) {
buttons[idx].click();
buttons[idx].scrollIntoView({behavior: 'smooth'});
}
}, 100); // 100ms delay — tweak if needed (e.g. 200 or 300)
});
