fengjun
9938e484bd
- Updated badge styles in culture.html for better visual consistency and added backdrop-filter support. - Introduced a fallback panel for the map in index.html with enhanced styles and responsive design. - Changed links in product_ecommerce_freight_booking.html, product_full_logistics_chain_cargo_agent.html, product_full_logistics_chain_platform.html, product_full_logistics_chain_ship_agent.html, product_port_cdi_container.html, product_shipping_boat.html, product_shipping_company.html to point to new URLs with query parameters. - Improved scroll reveal functionality in solution_inland_river_shipping.html, solution_logistics_chain.html, solution_port_supply_chain.html, and solution_supply_chain.html by replacing forEach with a traditional for loop for better performance.
53 lines
2.0 KiB
JavaScript
53 lines
2.0 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function() {
|
|
var tabGroups = document.querySelectorAll("[data-case-tabs]");
|
|
|
|
Array.prototype.forEach.call(tabGroups, function(group) {
|
|
var buttons = group.querySelectorAll("[data-case-tab]");
|
|
var panes = group.querySelectorAll("[data-case-pane]");
|
|
var params = new URLSearchParams(window.location.search);
|
|
var requestedTab = params.get("tab");
|
|
var defaultTab = group.getAttribute("data-default-tab");
|
|
var initialTab = requestedTab || defaultTab;
|
|
|
|
function activateTab(tabName, updateUrl) {
|
|
var hasMatch = false;
|
|
|
|
Array.prototype.forEach.call(buttons, function(button) {
|
|
var isActive = button.getAttribute("data-case-tab") === tabName;
|
|
button.classList.toggle("is-active", isActive);
|
|
button.setAttribute("aria-selected", isActive ? "true" : "false");
|
|
button.setAttribute("tabindex", isActive ? "0" : "-1");
|
|
if (isActive) {
|
|
hasMatch = true;
|
|
}
|
|
});
|
|
|
|
Array.prototype.forEach.call(panes, function(pane) {
|
|
var isActive = pane.getAttribute("data-case-pane") === tabName;
|
|
pane.classList.toggle("is-active", isActive);
|
|
pane.hidden = !isActive;
|
|
});
|
|
|
|
if (!hasMatch) {
|
|
if (defaultTab && defaultTab !== tabName) {
|
|
activateTab(defaultTab, updateUrl);
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (updateUrl) {
|
|
params.set("tab", tabName);
|
|
window.history.replaceState({}, "", window.location.pathname + "?" + params.toString() + window.location.hash);
|
|
}
|
|
}
|
|
|
|
Array.prototype.forEach.call(buttons, function(button) {
|
|
button.addEventListener("click", function() {
|
|
activateTab(button.getAttribute("data-case-tab"), true);
|
|
});
|
|
});
|
|
|
|
activateTab(initialTab, Boolean(requestedTab));
|
|
});
|
|
});
|