查看“︁Common.js”︁的源代码

/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */

/* MediaWiki 标签切换功能 */
(function() {
    'use strict';
    
    // 等待DOM加载完成
    function initTabSwitcher() {
        // 查找所有标签容器
        var tabContainers = document.querySelectorAll('.resp-tabs');
        
        tabContainers.forEach(function(container) {
            var tabList = container.querySelector('.resp-tabs-list');
            var tabContents = container.querySelectorAll('.resp-tab-content');
            var tabButtons = container.querySelectorAll('.czn-list-style');
            
            if (!tabList || tabContents.length === 0 || tabButtons.length === 0) {
                return; // 如果结构不完整，跳过这个容器
            }
            
            // 确保标签数量和内容数量匹配
            if (tabButtons.length !== tabContents.length) {
                console.warn('标签数量与内容数量不匹配');
                return;
            }
            
            // 初始化：隐藏所有内容，显示第一个
            tabContents.forEach(function(content, index) {
                if (index === 0) {
                    content.style.display = 'block';
                } else {
                    content.style.display = 'none';
                }
            });
            
            // 确保第一个标签是激活状态
            tabButtons.forEach(function(button, index) {
                if (index === 0) {
                    button.classList.add('active');
                } else {
                    button.classList.remove('active');
                }
            });
            
            // 为每个标签按钮添加点击事件
            tabButtons.forEach(function(button, index) {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 移除所有active类
                    tabButtons.forEach(function(btn) {
                        btn.classList.remove('active');
                    });
                    
                    // 隐藏所有内容
                    tabContents.forEach(function(content) {
                        content.style.display = 'none';
                    });
                    
                    // 激活当前标签和显示对应内容
                    button.classList.add('active');
                    if (tabContents[index]) {
                        tabContents[index].style.display = 'block';
                    }
                });
            });
            
            // 添加键盘支持
            tabButtons.forEach(function(button, index) {
                button.setAttribute('tabindex', '0');
                button.setAttribute('role', 'tab');
                button.addEventListener('keydown', function(e) {
                    if (e.key === 'Enter' || e.key === ' ') {
                        e.preventDefault();
                        button.click();
                    }
                });
            });
        });
    }
    
    // 页面加载完成后初始化
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initTabSwitcher);
    } else {
        initTabSwitcher();
    }
    
    // 支持动态添加的内容（如通过AJAX加载）
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'childList') {
                mutation.addedNodes.forEach(function(node) {
                    if (node.nodeType === 1) { // 元素节点
                        if (node.classList && node.classList.contains('resp-tabs')) {
                            initTabSwitcher();
                        } else if (node.querySelector && node.querySelector('.resp-tabs')) {
                            initTabSwitcher();
                        }
                    }
                });
            }
        });
    });
    
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();