构建动态网站：实现图片描述切换与主题切换功能

<div class="god-card">     <img src="path/to/image_of_god.png" alt="Egyptian God Name">     <p class="description hidden">         这是关于这位埃及神的详细描述，例如其职责、神话故事等。     </p>     <button class="toggle-description-btn">显示/隐藏描述</button> </div>  <!-- 可以为多个神祇复制此结构 --> <div class="god-card">     <img src="path/to/another_image.png" alt="Another God Name">     <p class="description hidden">         这是另一位神的描述内容。     </p>     <button class="toggle-description-btn">显示/隐藏描述</button> </div>

.hidden {     display: none; /* 隐藏元素 */ }  /* 可以添加一些基本样式美化卡片 */ .god-card {     border: 1px solid #ccc;     padding: 15px;     margin: 10px;     text-align: center;     max-width: 300px;     display: inline-block; /* 使卡片并排显示 */     vertical-align: top; }  .god-card img {     max-width: 100%;     height: auto;     margin-bottom: 10px; }  .god-card button {     padding: 8px 15px;     background-color: #007bff;     color: white;     border: none;     border-radius: 5px;     cursor: pointer;     margin-top: 10px; }  .god-card button:hover {     background-color: #0056b3; }

document.addEventListener('domContentLoaded', () => {     // 获取所有带有 'toggle-description-btn' 类的按钮     const toggleButtons = document.querySelectorAll('.toggle-description-btn');      toggleButtons.foreach(button => {         button.addEventListener('click', () => {             // 获取当前按钮的父元素 (即 .god-card)             const parentCard = button.closest('.god-card');             // 在父元素中查找带有 'description' 类的段落             const description = parentCard.querySelector('.description');              // 切换 'hidden' 类，从而切换描述的显示/隐藏             if (description) {                 description.classlist.toggle('hidden');             }         });     }); });

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

/* 默认主题 (浅色主题) */ body {     font-family: Arial, sans-serif;     background-color: #f4f4f4;     color: #333;     transition: background-color 0.3s ease, color 0.3s ease; /* 平滑过渡 */ }  /* 深色主题 */ body.dark-theme {     background-color: #222;     color: #eee; }  /* 可以为深色主题调整其他元素样式 */ body.dark-theme .god-card {     background-color: #333;     border-color: #555;     color: #eee; }  body.dark-theme .god-card button {     background-color: #0056b3; }  body.dark-theme .god-card button:hover {     background-color: #003d7a; }

document.addEventListener('DOMContentLoaded', () => {     const themeToggleButton = document.getElementById('theme-toggle-btn');     const body = document.body;      // 尝试从 localStorage 加载用户上次选择的主题     const savedTheme = localStorage.getItem('websiteTheme');     if (savedTheme) {         body.classList.add(savedTheme);     } else {         // 如果没有保存的主题，默认使用浅色主题 (或你想要的任何主题)         body.classList.add('light-theme'); // 明确设置一个默认主题     }      if (themeToggleButton) {         themeToggleButton.addEventListener('click', () => {             if (body.classList.contains('dark-theme')) {                 body.classList.remove('dark-theme');                 body.classList.add('light-theme');                 localStorage.setItem('websiteTheme', 'light-theme');             } else {                 body.classList.remove('light-theme'); // 移除旧主题类                 body.classList.add('dark-theme');                 localStorage.setItem('websiteTheme', 'dark-theme');             }         });     } });

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

31

查看详情

大家都在看：