73 lines
2.4 KiB
JavaScript
73 lines
2.4 KiB
JavaScript
|
// Tab functionality for commission rates
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
const tabButtons = document.querySelectorAll('.tab-button');
|
||
|
|
const tabPanes = document.querySelectorAll('.tab-pane');
|
||
|
|
const tabsContainer = document.querySelector('.tabs-container');
|
||
|
|
|
||
|
|
// Function to switch tabs
|
||
|
|
function switchTab(tabId) {
|
||
|
|
// Hide all tab panes
|
||
|
|
tabPanes.forEach(pane => {
|
||
|
|
pane.classList.remove('active');
|
||
|
|
});
|
||
|
|
|
||
|
|
// Remove active class from all buttons
|
||
|
|
tabButtons.forEach(button => {
|
||
|
|
button.classList.remove('active');
|
||
|
|
});
|
||
|
|
|
||
|
|
// Show the selected tab pane
|
||
|
|
const selectedPane = document.getElementById(tabId);
|
||
|
|
if (selectedPane) {
|
||
|
|
selectedPane.classList.add('active');
|
||
|
|
}
|
||
|
|
|
||
|
|
// Activate the clicked button
|
||
|
|
const activeButton = document.querySelector(`[data-tab="${tabId}"]`);
|
||
|
|
if (activeButton) {
|
||
|
|
activeButton.classList.add('active');
|
||
|
|
}
|
||
|
|
|
||
|
|
// Update URL hash for deep linking without scrolling
|
||
|
|
if (history.replaceState) {
|
||
|
|
history.replaceState(null, null, '#' + tabId);
|
||
|
|
} else {
|
||
|
|
window.location.hash = tabId;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Smoothly scroll to the top of the tabs container with offset
|
||
|
|
if (tabsContainer) {
|
||
|
|
const containerTop = tabsContainer.getBoundingClientRect().top + window.pageYOffset;
|
||
|
|
const offset = 100; // Adjust this value to control how much to scroll
|
||
|
|
window.scrollTo({
|
||
|
|
top: containerTop - offset,
|
||
|
|
behavior: 'smooth'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Add click event listeners to all tab buttons
|
||
|
|
tabButtons.forEach(button => {
|
||
|
|
button.addEventListener('click', function() {
|
||
|
|
const tabId = this.getAttribute('data-tab');
|
||
|
|
switchTab(tabId);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Check for hash in URL on page load
|
||
|
|
if (window.location.hash) {
|
||
|
|
const hash = window.location.hash.substring(1);
|
||
|
|
if (['stocks', 'options', 'futures', 'funds', 'other'].includes(hash)) {
|
||
|
|
switchTab(hash);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Handle browser back/forward navigation
|
||
|
|
window.addEventListener('hashchange', function() {
|
||
|
|
const hash = window.location.hash.substring(1);
|
||
|
|
if (['stocks', 'options', 'futures', 'funds', 'other'].includes(hash)) {
|
||
|
|
switchTab(hash);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|