📌 Navigating TABS - massive improvement!

[Dean D. Babic]

Hi all, 
pls test and improve before it's added to the Jam core!
No testing, no adding :)

Copy/paste to Task/JS at the bottom. Use CTRL+arrows (left,right) with open tabs

function navigateToTab(tabIndex) {
    document.querySelectorAll('.nav-link').forEach(tab => {
        tab.classList.remove('active');
    });
    const tabs = document.querySelectorAll('.nav-link');
    const targetTab = tabs[tabIndex];
    if (!targetTab) return; // Exit if tab doesn't exist
    targetTab.classList.add('active');
        const targetPaneId = targetTab.getAttribute('aria-controls') ||
                        (targetTab.getAttribute('href') ? targetTab.getAttribute('href').substring(1) : null);
    if (targetPaneId) {
        const targetPane = document.getElementById(targetPaneId);
        if (targetPane) {
            document.querySelectorAll('.tab-pane').forEach(pane => {
            pane.classList.remove('active', 'show');
            });
            targetPane.classList.add('active', 'show');
        }
    }
    targetTab.focus();
}

document.addEventListener('keydown', (e) => {
    if (e.ctrlKey && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
        const tabs = Array.from(document.querySelectorAll('.nav-link'));
        if (tabs.length <= 1) {
            e.preventDefault();
            return;
        }
        e.preventDefault();
        const currentIndex = tabs.findIndex(tab => tab.classList.contains('active'));
        let newIndex;
        if (e.key === 'ArrowLeft') {
            newIndex = (currentIndex - 1 + tabs.length) % tabs.length;
        } else {
            newIndex = (currentIndex + 1) % tabs.length;
        }
        navigateToTab(newIndex);
    }
});

[Dean D. Babic]

Updated:

function navigateToTab(tabIndex) {
    document.querySelectorAll('.nav-link').forEach(tab => {
        tab.classList.remove('active');
    });
    const tabs = document.querySelectorAll('.nav-link');
    const targetTab = tabs[tabIndex];
    if (!targetTab) return; // Exit if tab doesn't exist
    targetTab.classList.add('active');
        const targetPaneId = targetTab.getAttribute('aria-controls') ||
                        (targetTab.getAttribute('href') ? targetTab.getAttribute('href').substring(1) : null);
    if (targetPaneId) {
        const targetPane = document.getElementById(targetPaneId);
        if (targetPane) {
            document.querySelectorAll('.tab-pane').forEach(pane => {
            pane.classList.remove('active', 'show');
            });
            targetPane.classList.add('active', 'show');
        }
    }
    targetTab.focus();
}

function on_view_form_keydown(item, e) {

    if (e.ctrlKey && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
        const tabs = Array.from(document.querySelectorAll('.nav-link'));
        if (tabs.length <= 1) {
            e.preventDefault();

            e.stopPropagation();
            e.stopImmediatePropagation();
            return;
        }
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();

[Fabio Lenzarini]

Wow, for me work fine!

thanks Dean!

--
You received this message because you are subscribed to the Google Groups "Jam.py Users Mailing List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jam-py+un...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/jam-py/1475f200-2882-4dac-9f09-66ac26e16172n%40googlegroups.com.

[Zoi Moravec]

Nice feature! Worked! Thanks! Deployed )

пятница, 16 января 2026 г. в 14:23:32 UTC+3, Fabio Lenzarini: