构建交互式图片画廊与网站主题切换：CSS与JavaScript实战指南

<div class="god-card">
    <img src="images/ra.jpg" alt="埃及神拉">
    <p class="god-description hidden">拉（Ra）是古埃及最重要的太阳神，通常被描绘成鹰头人身，头戴太阳圆盘和圣蛇。</p>
    <button class="toggle-description-btn">显示/隐藏拉的描述</button>
</div>

<div class="god-card">
    <img src="images/isis.jpg" alt="埃及神伊西斯">
    <p class="god-description hidden">伊西斯（Isis）是古埃及的母神和魔法女神，奥西里斯的妻子，荷鲁斯的母亲。</p>
    <button class="toggle-description-btn">显示/隐藏伊西斯的描述</button>
</div>

<!-- 可以添加更多神祇卡片 -->

.god-card {
    border: 1px solid #ccc;
    padding: 15px;
    margin: 15px;
    text-align: center;
    width: 250px; /* 根据需要调整 */
    display: inline-block; /* 使卡片并排显示 */
    vertical-align: top;
}

.god-card img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.god-description {
    margin-top: 10px;
    font-size: 0.9em;
    color: #555;
    text-align: left;
}

/* 默认隐藏描述 */
.god-description.hidden {
    display: none;
}

.toggle-description-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    margin-top: 10px;
    border-radius: 4px;
}

.toggle-description-btn:hover {
    background-color: #0056b3;
}

document.addEventListener('DOMContentLoaded', () => {
    const toggleButtons = document.querySelectorAll('.toggle-description-btn');

    toggleButtons.forEach(button => {
        button.addEventListener('click', (event) => {
            // 获取当前按钮所在的父元素 (god-card)
            const parentCard = event.target.closest('.god-card');
            // 在父元素中找到描述段落
            const description = parentCard.querySelector('.god-description');

            if (description) {
                // 切换 'hidden' 类来显示或隐藏描述
                description.classList.toggle('hidden');

                // 可选：根据描述的可见性更新按钮文本
                if (description.classList.contains('hidden')) {
                    event.target.textContent = event.target.textContent.replace('隐藏', '显示');
                } else {
                    event.target.textContent = event.target.textContent.replace('显示', '隐藏');
                }
            }
        });
    });
});

<button id="theme-toggle-btn">切换主题</button>

/* 默认亮色主题 */
body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa; /* 默认背景色 */
    color: #333; /* 默认文本色 */
    transition: background-color 0.3s ease, color 0.3s ease; /* 平滑过渡 */
}

.god-card {
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 暗色主题样式 */
body.dark-theme {
    background-color: #343a40; /* 暗色背景 */
    color: #e2e6ea; /* 暗色文本 */
}

body.dark-theme .god-card {
    background-color: #495057;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    border-color: #6c757d;
}

body.dark-theme .god-description {
    color: #c0c4c8;
}

body.dark-theme .toggle-description-btn {
    background-color: #6c757d;
}

body.dark-theme .toggle-description-btn:hover {
    background-color: #5a6268;
}

#theme-toggle-btn {
    position: fixed; /* 固定在屏幕一角 */
    top: 20px;
    right: 20px;
    padding: 10px 15px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    z-index: 1000;
}

#theme-toggle-btn:hover {
    background-color: #218838;
}

document.addEventListener('DOMContentLoaded', () => {
    const themeToggleButton = document.getElementById('theme-toggle-btn');
    const body = document.body;

    // 检查用户是否有保存的主题偏好
    const currentTheme = localStorage.getItem('theme');
    if (currentTheme) {
        body.classList.add(currentTheme);
    }

    themeToggleButton.addEventListener('click', () => {
        body.classList.toggle('dark-theme');

        // 将主题偏好保存到本地存储
        if (body.classList.contains('dark-theme')) {
            localStorage.setItem('theme', 'dark-theme');
        } else {
            localStorage.removeItem('theme'); // 或设置为 'light-theme'
        }
    });
});