File size: 1,919 Bytes
8114938 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
document.addEventListener('DOMContentLoaded', function() {
// Tab functionality
const tabButtons = document.querySelectorAll('.tab-btn');
tabButtons.forEach(button => {
button.addEventListener('click', () => {
const tabId = button.getAttribute('data-tab');
// Remove active class from all buttons
tabButtons.forEach(btn => btn.classList.remove('active'));
// Add active class to clicked button
button.classList.add('active');
// Hide all tab contents
document.querySelectorAll('.tab-content').forEach(content => {
content.classList.add('hidden');
});
// Show the selected tab content
document.getElementById(tabId).classList.remove('hidden');
});
});
// Simulate loading content for demo purposes
setTimeout(() => {
const tabContents = document.querySelectorAll('.tab-content');
tabContents.forEach(tab => {
tab.innerHTML = `<p>This is a demo of the ${tab.id} section. In a real application, this would be populated with dynamic content.</p>`;
});
const eventsGrid = document.querySelector('.events-grid');
if (eventsGrid) {
eventsGrid.innerHTML = `
<div class="card">
<h3>Campus Hackathon</h3>
<p>May 15, 2023 | Computer Lab</p>
</div>
<div class="card">
<h3>Guest Lecture: AI Ethics</h3>
<p>May 18, 2023 | Auditorium</p>
</div>
`;
}
const teamGrid = document.querySelector('.team-grid');
if (teamGrid) {
teamGrid.innerHTML = `
<div class="card">
<h3>Alex Johnson</h3>
<p>Project Lead</p>
</div>
<div class="card">
<h3>Sam Wilson</h3>
<p>Frontend Developer</p>
</div>
<div class="card">
<h3>Taylor Smith</h3>
<p>Backend Developer</p>
</div>
`;
}
}, 300);
}); |