MediaWiki

Common.js:修订间差异

来自卡厄思梦境WIKI

律Rhyme留言 | 贡献
创建页面,内容为“这里的任何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');…”
 
律Rhyme留言 | 贡献
无编辑摘要
第1行: 第1行:
/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */
/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */


/* MediaWiki 标签切换功能 */
(function() {
(function() {
     'use strict';
     'use strict';
      
      
    // 等待DOM加载完成
     function initTabSwitcher() {
     function initTabSwitcher() {
        // 查找所有标签容器
         var tabContainers = document.querySelectorAll('.resp-tabs');
         var tabContainers = document.querySelectorAll('.resp-tabs');
          
          
         tabContainers.forEach(function(container) {
         tabContainers.forEach(function(container) {
             var tabList = container.querySelector('.resp-tabs-list');
             var tabButtons = container.querySelectorAll('.czn-list-style');
            if (tabButtons.length === 0) return;
           
            // 检测模式
             var tabContents = container.querySelectorAll('.resp-tab-content');
             var tabContents = container.querySelectorAll('.resp-tab-content');
             var tabButtons = container.querySelectorAll('.czn-list-style');
             var portraitImages = document.querySelectorAll('.portrait-image');
           
            // 初始化
            tabButtons.forEach(function(button, index) {
                button.classList.toggle('active', index === 0);
            });
              
              
             if (!tabList || tabContents.length === 0 || tabButtons.length === 0) {
             if (tabContents.length > 0) {
                 return; // 如果结构不完整,跳过这个容器
                tabContents.forEach(function(content, index) {
                    content.style.display = index === 0 ? 'block' : 'none';
                 });
             }
             }
              
              
            // 确保标签数量和内容数量匹配
             if (portraitImages.length > 0) {
             if (tabButtons.length !== tabContents.length) {
                 portraitImages.forEach(function(image, index) {
                 console.warn('标签数量与内容数量不匹配');
                    image.style.display = index === 0 ? 'block' : 'none';
                 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) {
             tabButtons.forEach(function(button, index) {
                 button.addEventListener('click', function(e) {
                 button.addEventListener('click', function(e) {
                     e.preventDefault();
                     e.preventDefault();
                      
                      
                     // 移除所有active类
                     // 更新标签状态
                     tabButtons.forEach(function(btn) {
                     tabButtons.forEach(function(btn, i) {
                         btn.classList.remove('active');
                         btn.classList.toggle('active', i === index);
                     });
                     });
                      
                      
                     // 隐藏所有内容
                     // 传统模式切换
                     tabContents.forEach(function(content) {
                     if (tabContents.length > 0) {
                        content.style.display = 'none';
                        tabContents.forEach(function(content, i) {
                    });
                            content.style.display = i === index ? 'block' : 'none';
                        });
                    }
                      
                      
                     // 激活当前标签和显示对应内容
                     // 立绘模式切换
                     button.classList.add('active');
                     if (portraitImages.length > 0) {
                    if (tabContents[index]) {
                        portraitImages.forEach(function(image) {
                        tabContents[index].style.display = 'block';
                            image.style.display = 'none';
                    }
                        });
                });
                        var targetImage = document.querySelector('.portrait-image[data-index="' + index + '"]');
            });
                        if (targetImage) {
           
                            targetImage.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();
                     }
                     }
                 });
                 });
第80行: 第64行:
     }
     }
      
      
     // 页面加载完成后初始化
     // 初始化
     if (document.readyState === 'loading') {
     if (document.readyState === 'loading') {
         document.addEventListener('DOMContentLoaded', initTabSwitcher);
         document.addEventListener('DOMContentLoaded', initTabSwitcher);
第86行: 第70行:
         initTabSwitcher();
         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
    });
})();
})();

2025年9月21日 (日) 18:57的版本

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

(function() {
    'use strict';
    
    function initTabSwitcher() {
        var tabContainers = document.querySelectorAll('.resp-tabs');
        
        tabContainers.forEach(function(container) {
            var tabButtons = container.querySelectorAll('.czn-list-style');
            if (tabButtons.length === 0) return;
            
            // 检测模式
            var tabContents = container.querySelectorAll('.resp-tab-content');
            var portraitImages = document.querySelectorAll('.portrait-image');
            
            // 初始化
            tabButtons.forEach(function(button, index) {
                button.classList.toggle('active', index === 0);
            });
            
            if (tabContents.length > 0) {
                tabContents.forEach(function(content, index) {
                    content.style.display = index === 0 ? 'block' : 'none';
                });
            }
            
            if (portraitImages.length > 0) {
                portraitImages.forEach(function(image, index) {
                    image.style.display = index === 0 ? 'block' : 'none';
                });
            }
            
            // 点击事件
            tabButtons.forEach(function(button, index) {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 更新标签状态
                    tabButtons.forEach(function(btn, i) {
                        btn.classList.toggle('active', i === index);
                    });
                    
                    // 传统模式切换
                    if (tabContents.length > 0) {
                        tabContents.forEach(function(content, i) {
                            content.style.display = i === index ? 'block' : 'none';
                        });
                    }
                    
                    // 立绘模式切换
                    if (portraitImages.length > 0) {
                        portraitImages.forEach(function(image) {
                            image.style.display = 'none';
                        });
                        var targetImage = document.querySelector('.portrait-image[data-index="' + index + '"]');
                        if (targetImage) {
                            targetImage.style.display = 'block';
                        }
                    }
                });
            });
        });
    }
    
    // 初始化
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initTabSwitcher);
    } else {
        initTabSwitcher();
    }
})();