Basic integration of tabs UI on theme settings page

assets/js/lcp-ui.js

@@ -36,17 +36,26 @@ document.addEventListener('DOMContentLoaded', function () {
     const panes = document.querySelectorAll('.tab-pane');
 
     tabs.forEach(tab => {
-      tab.addEventListener('click', function (event) {
-        event.preventDefault();
+        tab.addEventListener('click', function (event) {
+            event.preventDefault();
 
-        // Remove active class from all tabs and panes
-        tabs.forEach(link => link.classList.remove('active'));
-        panes.forEach(pane => pane.classList.remove('active'));
+            // Remove active class from all tabs and panes
+            tabs.forEach(link => link.classList.remove('active'));
+            panes.forEach(pane => pane.classList.remove('active'));
 
-        // Add active class to the clicked tab and its corresponding pane
-        tab.classList.add('active');
-        const targetPane = document.querySelector(tab.getAttribute('href'));
-        targetPane.classList.add('active');
-      });
+            // Add active class to the clicked tab
+            tab.classList.add('active');
+            
+            // Get the target pane
+            const targetPaneId = tab.dataset.tab;
+            const targetPane = document.getElementById(targetPaneId);
+
+            // Check if targetPane exists before trying to manipulate it
+            if (targetPane) {
+                targetPane.classList.add('active');
+            } else {
+                console.error(`Tab pane with ID '${targetPaneId}' not found.`);
+            }
+        });
     });
-  });
+});