material-design-lite
material-design-lite copied to clipboard
How change tab content by url?
I really want change tab content not just by clicking that tab. but by enter url on browser. because i create a PWA( progressive web app), then we need each page have a unique URL. like Twitter Mobile Website.
Thanks.
https://github.com/google/material-design-lite/issues/1359#issuecomment-232098826
document.addEventListener("DOMContentLoaded", function() { // Get the current URL hash var hash = window.location.hash;
// Show the corresponding tab content based on the URL hash
showTabContent(hash);
// Listen for hash changes and update the tab content accordingly
window.addEventListener("hashchange", function() {
hash = window.location.hash;
showTabContent(hash);
});
// Function to show the tab content based on the hash value
function showTabContent(hash) {
// Hide all tab panels
var tabPanels = document.getElementsByClassName("tab-panel");
for (var i = 0; i < tabPanels.length; i++) {
tabPanels[i].style.display = "none";
}
// Show the tab panel corresponding to the hash value
var tabPanel = document.querySelector(hash);
if (tabPanel) {
tabPanel.style.display = "block";
}
}
}); Try this Hopefully It will work