Sindbad~EG File Manager
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tab Test</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="bg-gray-100 p-8">
<div class="max-w-4xl mx-auto">
<h1 class="text-2xl font-bold mb-6">Tab Functionality Test</h1>
<!-- Tab Navigation -->
<div class="bg-white rounded-xl shadow-lg mb-6">
<div class="border-b border-gray-200">
<nav class="-mb-px flex space-x-8 px-6">
<button id="membershipCardTab" onclick="showCardTab('membershipCard')"
class="py-4 px-1 border-b-2 font-medium text-sm transition-colors duration-200">
<i class="fas fa-id-card mr-2"></i>Membership Cards
</button>
<button id="memberCodesCardTab" onclick="showCardTab('memberCodesCard')"
class="py-4 px-1 border-b-2 font-medium text-sm transition-colors duration-200">
<i class="fas fa-qrcode mr-2"></i>Member Codes Card
</button>
</nav>
</div>
</div>
<!-- Tab Contents -->
<div id="membershipCardContent" class="card-tab-content">
<div class="bg-white rounded-xl shadow-lg p-6">
<h2 class="text-xl font-bold text-blue-600 mb-4">Membership Cards Tab</h2>
<p>This is the membership cards content. It should be visible by default.</p>
<div class="mt-4 p-4 bg-blue-50 rounded-lg">
<p>✅ Tab 1 is working correctly!</p>
</div>
</div>
</div>
<div id="memberCodesCardContent" class="card-tab-content hidden">
<div class="bg-white rounded-xl shadow-lg p-6">
<h2 class="text-xl font-bold text-purple-600 mb-4">Member Codes Card Tab</h2>
<p>This is the member codes content. It should be hidden by default.</p>
<div class="mt-4 p-4 bg-purple-50 rounded-lg">
<p>✅ Tab 2 is working correctly!</p>
</div>
</div>
</div>
</div>
<script>
// Tab functionality
function showCardTab(tabName) {
console.log('Switching to tab:', tabName);
try {
// Hide all tab contents
document.querySelectorAll('.card-tab-content').forEach(content => {
content.classList.add('hidden');
console.log('Hiding content:', content.id);
});
// Reset all tabs to inactive state
document.querySelectorAll('[id$="Tab"]').forEach(tab => {
tab.classList.remove('border-blue-500', 'text-blue-600');
tab.classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
console.log('Reset tab:', tab.id);
});
// Show selected tab content
const targetContent = document.getElementById(tabName + 'Content');
if (targetContent) {
targetContent.classList.remove('hidden');
console.log('Showing content:', targetContent.id);
} else {
console.error('Target content not found:', tabName + 'Content');
}
// Activate selected tab
const activeTab = document.getElementById(tabName + 'Tab');
if (activeTab) {
activeTab.classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
activeTab.classList.add('border-blue-500', 'text-blue-600');
console.log('Activated tab:', activeTab.id);
} else {
console.error('Active tab not found:', tabName + 'Tab');
}
} catch (error) {
console.error('Error in showCardTab:', error);
}
}
// Initialize tabs on page load
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM loaded, initializing tabs...');
// Ensure the first tab (membership cards) is active by default
showCardTab('membershipCard');
// Debug: Check if elements exist
console.log('membershipCardTab exists:', !!document.getElementById('membershipCardTab'));
console.log('memberCodesCardTab exists:', !!document.getElementById('memberCodesCardTab'));
console.log('membershipCardContent exists:', !!document.getElementById('membershipCardContent'));
console.log('memberCodesCardContent exists:', !!document.getElementById('memberCodesCardContent'));
});
</script>
<style>
.card-tab-content {
display: block;
}
.card-tab-content.hidden {
display: none !important;
}
</style>
</body>
</html>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists