PanPan Design Shop
PanPan Design
  • Services ▾
    • • Graphic Design
    • • Video Editing
    • • Website Building
  • Contact
PanPan Bottom Tab Bar
HomeShopJobsClass
document.addEventListener('DOMContentLoaded', function () { const tabs = document.querySelectorAll('.tab-item'); const shopTab = document.querySelector(".tab-item[data-icon='cart']"); function updateIcons(activeTab) { tabs.forEach(tab => { const icon = tab.querySelector("i"); const base = tab.dataset.icon; // If the current tab is the active one, use the filled icon. // Otherwise, use the regular icon. if (tab === activeTab) { tab.classList.add('active'); icon.className = `bx bxs-${base}`; } else { tab.classList.remove('active'); icon.className = `bx bx-${base}`; } }); } tabs.forEach(tab => { tab.addEventListener('click', (e) => { // Prevent the default action to stop the page from redirecting immediately e.preventDefault(); // Check if the clicked tab is NOT the 'Shop' tab. // This is the key change to ensure 'Shop' always stays active. if (tab !== shopTab) { // Remove the 'active' class from all tabs tabs.forEach(t => t.classList.remove('active')); // Add the 'active' class to the clicked tab tab.classList.add('active'); // Update icons based on the new active tab updateIcons(tab); } // Redirect to the new URL after the state has been updated window.location.href = tab.href; }); }); // Make sure the "Shop" tab is active and has the filled icon on page load. // This initial call is crucial for the default state. updateIcons(shopTab); });