js实现tab键的效果

使用事件监听实现Tab键切换焦点

在JavaScript中，可以通过监听键盘事件来实现Tab键的焦点切换效果。以下是一个基本实现：

document.addEventListener('keydown', function(event) {
    if (event.key === 'Tab') {
        event.preventDefault();
        const focusableElements = document.querySelectorAll('a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
        const firstElement = focusableElements[0];
        const lastElement = focusableElements[focusableElements.length - 1];

        if (event.shiftKey && document.activeElement === firstElement) {
            lastElement.focus();
        } else if (!event.shiftKey && document.activeElement === lastElement) {
            firstElement.focus();
        }
    }
});

创建自定义Tab组件

对于更复杂的Tab界面（如内容面板切换），可以构建一个完整的Tab组件：

class TabSystem {
    constructor(container) {
        this.container = container;
        this.tabs = Array.from(container.querySelectorAll('.tab'));
        this.panels = Array.from(container.querySelectorAll('.tab-panel'));

        this.tabs.forEach(tab => {
            tab.addEventListener('click', () => this.activateTab(tab));
        });
    }

    activateTab(selectedTab) {
        this.tabs.forEach(tab => tab.classList.remove('active'));
        this.panels.forEach(panel => panel.classList.remove('active'));

        selectedTab.classList.add('active');
        const panelId = selectedTab.getAttribute('aria-controls');
        const panel = this.container.querySelector(`#${panelId}`);
        panel.classList.add('active');
    }
}

// 初始化所有Tab系统
document.querySelectorAll('.tab-container').forEach(container => {
    new TabSystem(container);
});

无障碍访问增强

为确保Tab系统符合无障碍标准，需要添加ARIA属性：

<div class="tab-container" role="tablist">
    <button class="tab" role="tab" aria-selected="true" aria-controls="panel1">Tab 1</button>
    <button class="tab" role="tab" aria-selected="false" aria-controls="panel2">Tab 2</button>

    <div id="panel1" class="tab-panel" role="tabpanel">内容1</div>
    <div id="panel2" class="tab-panel" role="tabpanel" hidden>内容2</div>
</div>

键盘导航支持

为自定义Tab组件添加键盘导航：

class TabSystem {
    // ...之前的代码...

    handleKeyDown(event) {
        const currentIndex = this.tabs.indexOf(document.activeElement);

        if (event.key === 'ArrowRight') {
            const nextIndex = (currentIndex + 1) % this.tabs.length;
            this.tabs[nextIndex].focus();
        } else if (event.key === 'ArrowLeft') {
            const prevIndex = (currentIndex - 1 + this.tabs.length) % this.tabs.length;
            this.tabs[prevIndex].focus();
        } else if (event.key === 'Home') {
            this.tabs[0].focus();
        } else if (event.key === 'End') {
            this.tabs[this.tabs.length - 1].focus();
        }
    }

    // 初始化时添加键盘事件
    constructor(container) {
        // ...之前的代码...
        container.addEventListener('keydown', (e) => this.handleKeyDown(e));
    }
}

CSS样式配合

确保Tab系统有清晰的视觉反馈：

.tab-container {
    display: flex;
    flex-direction: column;
}

[role="tablist"] {
    display: flex;
    gap: 0.5rem;
}

[role="tab"] {
    padding: 0.5rem 1rem;
    background: #eee;
    border: none;
    cursor: pointer;
}

[role="tab"][aria-selected="true"] {
    background: #007bff;
    color: white;
}

[role="tabpanel"] {
    padding: 1rem;
    border: 1px solid #ddd;
}

[role="tabpanel"][hidden] {
    display: none;
}

这些实现方法涵盖了从基本的Tab键功能到完整的可访问Tab组件的不同需求层次，可以根据具体场景选择适合的方案。