64 lines
2.4 KiB
JavaScript
64 lines
2.4 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
const siteData = JSON.parse(document.getElementById('site-data').textContent);
|
|
const contentArea = document.getElementById('content-area');
|
|
const navLinks = document.querySelectorAll('.nav-link');
|
|
const backToTopBtn = document.getElementById('backToTop');
|
|
|
|
// Handle Content Switching
|
|
navLinks.forEach(link => {
|
|
link.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
|
|
// Update Active Link
|
|
navLinks.forEach(l => l.classList.remove('active'));
|
|
this.classList.add('active');
|
|
|
|
const sectionKey = this.getAttribute('data-section');
|
|
const data = siteData.find(item => item.section_key === sectionKey);
|
|
|
|
if (data) {
|
|
renderContent(data);
|
|
// On mobile, scroll to content after selection
|
|
if (window.innerWidth < 768) {
|
|
contentArea.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
function renderContent(data) {
|
|
// We use innerHTML directly because content is pre-formatted in setup_db.php
|
|
contentArea.innerHTML = `
|
|
<div class="d-flex align-items-center mb-4 border-bottom pb-3">
|
|
<i class="bi bi-star-fill text-warning me-3 fs-3"></i>
|
|
<h2 class="fw-black mb-0" style="color: #B71C1C;">${data.title}</h2>
|
|
</div>
|
|
<div class="content-body animate-fade-in">
|
|
${data.content}
|
|
</div>
|
|
<div class="mt-5 pt-4 border-top d-flex justify-content-between align-items-center text-muted small">
|
|
<span><i class="bi bi-shield-check me-1"></i> 财神组内部资料</span>
|
|
<span>更新时间: ${data.updated_at || '2026-01-30'}</span>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Back to Top Button
|
|
window.addEventListener('scroll', function() {
|
|
if (window.pageYOffset > 300) {
|
|
backToTopBtn.classList.remove('d-none');
|
|
} else {
|
|
backToTopBtn.classList.add('d-none');
|
|
}
|
|
});
|
|
|
|
backToTopBtn.addEventListener('click', function() {
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
});
|
|
|
|
// Auto-select Day 1 on load
|
|
const firstLink = document.querySelector('.nav-link[data-section="day1"]');
|
|
if (firstLink) {
|
|
firstLink.click();
|
|
}
|
|
}); |