Update script.js

script.js

@@ -29,46 +29,53 @@ document.addEventListener('DOMContentLoaded', () => {
     const navObserver = new IntersectionObserver(entries => {
         entries.forEach(entry => {
             if (entry.isIntersecting) {
+                const id = entry.target.getAttribute('id');
                 navLinks.forEach(link => {
-                    link.classList.toggle('active', link.getAttribute('href').split('#')[1] === entry.target.id);
+                    link.classList.remove('active');
+                    if (link.getAttribute('href') === `#${id}`) {
+                        link.classList.add('active');
+                    }
                 });
             }
         });
     }, {
         rootMargin: '-50% 0px -50% 0px'
     });
-    sections.forEach(section => {
-        if(section.id) {
-           navObserver.observe(section);
-        }
+    document.querySelectorAll('section[id]').forEach(section => {
+        navObserver.observe(section);
     });
 
-    // --- ★★★★★ 新增：點擊放大 (Lightbox) 功能 ★★★★★ ---
-    const lightboxTriggers = document.querySelectorAll('.lightbox-trigger');
-    
-    lightboxTriggers.forEach(trigger => {
-        trigger.addEventListener('click', function(e) {
-            e.preventDefault(); // 防止連結跳轉
+    // --- ★★★★★ 修正並簡化後的燈箱功能 ★★★★★ ---
+    document.body.addEventListener('click', function(event) {
+        // 檢查點擊的是否是帶有 .lightbox-trigger 的 <a> 標籤
+        if (event.target.closest('.lightbox-trigger')) {
+            event.preventDefault(); // 阻止連結的默認跳轉行為
             
-            const imageUrl = this.getAttribute('href');
+            const trigger = event.target.closest('.lightbox-trigger');
+            const imageUrl = trigger.getAttribute('href');
             
-            // 創建燈箱
+            // 如果頁面上已經有燈箱，就不要再創建
+            if (document.querySelector('.lightbox')) {
+                return;
+            }
+
+            // 創建燈箱元素
             const lightbox = document.createElement('div');
-            lightbox.classList.add('lightbox');
-            
-            const lightboxContent = document.createElement('img');
-            lightboxContent.src = imageUrl;
+            lightbox.className = 'lightbox';
+            lightbox.innerHTML = `<img src="${imageUrl}" alt="放大圖片">`;
             
-            lightbox.appendChild(lightboxContent);
+            // 將燈箱加入到 body
             document.body.appendChild(lightbox);
-            
-            // 點擊燈箱關閉
+
+            // 監聽點擊燈箱本身以關閉
             lightbox.addEventListener('click', () => {
                 lightbox.classList.add('closing');
                 setTimeout(() => {
-                    document.body.removeChild(lightbox);
-                }, 300); // 等待動畫結束後移除
+                    if (document.body.contains(lightbox)) {
+                        document.body.removeChild(lightbox);
+                    }
+                }, 300); // 等待淡出動畫結束
             });
-        });
+        }
     });
 });