63 lines
2.2 KiB
JavaScript
63 lines
2.2 KiB
JavaScript
|
// traffic_tabs.js - Handle query parameters for tab selection in traffic.html
|
||
|
|
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
// Get all tab items
|
||
|
|
const tabItems = document.querySelectorAll('.tab-item');
|
||
|
|
|
||
|
|
// Function to activate a tab
|
||
|
|
function activateTab(tabName) {
|
||
|
|
// Find the tab item with the given tab name
|
||
|
|
const tabItem = document.querySelector(`.tab-item[data-tab="${tabName}"]`);
|
||
|
|
if (!tabItem) return;
|
||
|
|
|
||
|
|
// Remove active class from all tab items
|
||
|
|
tabItems.forEach(item => item.classList.remove('active'));
|
||
|
|
|
||
|
|
// Add active class to the selected tab item
|
||
|
|
tabItem.classList.add('active');
|
||
|
|
|
||
|
|
// Get all tab panes
|
||
|
|
const tabPanes = document.querySelectorAll('.tab-pane');
|
||
|
|
|
||
|
|
// Remove active class from all tab panes
|
||
|
|
tabPanes.forEach(pane => pane.classList.remove('active'));
|
||
|
|
|
||
|
|
// Add active class to the corresponding tab pane
|
||
|
|
document.getElementById(tabName + '-tab').classList.add('active');
|
||
|
|
|
||
|
|
// Save active tab to localStorage
|
||
|
|
localStorage.setItem('activeTab', tabName);
|
||
|
|
|
||
|
|
// Update URL with query parameter
|
||
|
|
const url = new URL(window.location.href);
|
||
|
|
url.searchParams.set('tab', tabName);
|
||
|
|
history.replaceState(null, '', url);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Add click event listener to each tab item
|
||
|
|
tabItems.forEach(tab => {
|
||
|
|
tab.addEventListener('click', function() {
|
||
|
|
// Get the tab name from data-tab attribute
|
||
|
|
const tabName = this.getAttribute('data-tab');
|
||
|
|
|
||
|
|
// Activate the tab
|
||
|
|
activateTab(tabName);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Check for tab query parameter
|
||
|
|
const urlParams = new URLSearchParams(window.location.search);
|
||
|
|
const tabParam = urlParams.get('tab');
|
||
|
|
|
||
|
|
if (tabParam) {
|
||
|
|
// Activate the tab from query parameter
|
||
|
|
activateTab(tabParam);
|
||
|
|
} else {
|
||
|
|
// Restore active tab from localStorage if no query parameter
|
||
|
|
const activeTab = localStorage.getItem('activeTab');
|
||
|
|
if (activeTab) {
|
||
|
|
// Activate the tab from localStorage
|
||
|
|
activateTab(activeTab);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|