google / material-design-lite

Material Design Components in HTML/CSS/JS
https://getmdl.io
Apache License 2.0
32.29k stars 5.03k forks source link

How change tab content by url? #5229

Open CarlGalloy opened 6 years ago

CarlGalloy commented 6 years ago

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.

iamabs2001 commented 4 years ago

https://github.com/google/material-design-lite/issues/1359#issuecomment-232098826

Akshat162001 commented 1 year ago

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