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
function openOxygenTabFromHash() {
// small delay to let Oxygen render tabs
setTimeout(function () {
var hash = window.location.hash.replace('#', '');
if (!hash) return;
// 1️⃣ Try tab button with class tab-hash-<hash>
var btn = document.querySelector('.tab-hash-' + CSS.escape(hash));
if (btn) {
btn.click();
btn.scrollIntoView({ behavior: 'smooth', block: 'start' });
return;
}
// 2️⃣ Fallback: tab pane by ID
var pane = document.getElementById(hash);
if (!pane) return;
var tabsWrapper = pane.closest('.oxy-tabs');
if (!tabsWrapper) return;
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 !== -1 && buttons[idx]) {
buttons[idx].click();
buttons[idx].scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}, 150);
}
// Run on page load
document.addEventListener('DOMContentLoaded', openOxygenTabFromHash);
// Run when hash changes (same page clicks)
window.addEventListener('hashchange', openOxygenTabFromHash);