Widget:Tab

<script>
console.log('Skin switcher script loaded successfully');
document.querySelectorAll('.ch-skin-btn').forEach(button => {
    button.addEventListener('click', function() {
        // 获取当前按钮的 data-skin 索引
        const skinIndex = this.getAttribute('data-skin');
        
        // 移除所有按钮的 selected 类
        document.querySelectorAll('.ch-skin-btn').forEach(btn => {
            btn.classList.remove('ch-skin-selected');
        });

        // 为当前按钮添加 selected 类
        this.classList.add('ch-skin-selected');

        // 隐藏所有的 ch-plotdrawing-pic 图片
        document.querySelectorAll('.ch-plotdrawing-pic').forEach(plot => {
            plot.style.display = 'none';
        });

        // 显示点击对应的图片
        const targetPlot = document.getElementById(`skin-plotdrawing-${skinIndex}`);
        if (targetPlot) {
            targetPlot.style.display = 'block';
            console.log(`Displaying plot for skin index: ${skinIndex}`);
        } else {
            console.error(`No plot found for skin index: ${skinIndex}`);
        }
    });
});


    document.addEventListener("DOMContentLoaded", function() {
        const img = document.querySelector('[data-id="myImage"]');

        // 等待图片加载完后获取其自然宽高
        img.onload = function() {
            const naturalWidth = img.naturalWidth;
            const naturalHeight = img.naturalHeight;

            // 如果图片高度比宽度大得多，则限制高度
            if (naturalHeight / naturalWidth > 1.2) {
                img.style.height = '100%';
                img.style.width = 'auto';
            } else {
                // 否则限制宽度
                img.style.width = '100%';
                img.style.height = 'auto';
            }
        };
    });
</script>