Siemka,
Mam taką stronę marcingredka.com i skrypt który sprawia że po kliknięciu w opcje menu reszta sekcji dostaje display:none a jedna konkretna display:block. Jak sprawić żeby po kliknięciu np. w portfolio można było klikając wstecz na przeglądarce wrócic do poprzedniej sekcji?
Poniżej kod do obsługi tego przełączania. Z góry dziękuje za pomoc :D
document.addEventListener('DOMContentLoaded', function () {
//Prevent translating tittle
const siteLogo=document.querySelector('#site-logo');
siteLogo.classList.add('notranslate');
//Header
const mainSection = document.querySelector('#glowna');
mainSection.style.display="block";
const portfolioHeader = document.querySelector('#portfolio-header');
const portfolioContent=document.querySelector('#portfolio-content');
const portfolioContent2=document.querySelector('#portfolio-content2');
const aboutSection=document.querySelector("#about");
const contactSection=document.querySelector("#contact");
//Portfolio sekcje
const artystyczneSection=document.querySelector('#artystyczne-section');
const eventySection=document.querySelector("#eventy-section");
const plenerySection=document.querySelector("#plenery-section");
const portretySection=document.querySelector("#portrety-section");
const sensualSection=document.querySelector("#sensual-section");
const studioSection=document.querySelector("#studio-section");
//Portfolio linki
const artystyczneLink=document.querySelector('#artystyczne-link');
const eventyLink=document.querySelector("#eventy-link");
const pleneryLink=document.querySelector("#plenery-link");
const portretyLink=document.querySelector("#portrety-link");
const sensualLink=document.querySelector("#sensual-link");
const studioLink=document.querySelector("#studio-link");
//Portfolio back links
const back1=document.querySelector("#portfolio-back-link1");
const back2=document.querySelector("#portfolio-back-link2");
const back3=document.querySelector("#portfolio-back-link3");
const back4=document.querySelector("#portfolio-back-link4");
const back5=document.querySelector("#portfolio-back-link5");
const back6=document.querySelector("#portfolio-back-link6");
const tabSections=document.querySelectorAll('.tab-section');
const sectionsDissapear = ()=>{
tabSections.forEach((element)=>{
element.style.display='none';
});
};
//Header
const mainLink=document.querySelectorAll('.site-title.site-logo-text');
const portfolioLink = document.querySelectorAll('a[href="#portfolio"]');
const aboutLink=document.querySelectorAll('a[href="#about"]');
const contactLink=document.querySelectorAll('a[href="#contact"]');
mainLink.forEach(e1=>{
e1.addEventListener('click',(e)=>{
e.preventDefault();
sectionsDissapear();
mainSection.style.display="block";
});
});
//Portfolio
const portfolio=(e)=>{
console.log('dadsf');
e.preventDefault();
sectionsDissapear();
portfolioHeader.style.display="block";
portfolioContent.style.display='flex';
portfolioContent2.style.display='flex';
window.history.pushState({page:'portfolio'},'Portfolio','#portfolio');
handlePopState('portfolio');
};
portfolioLink.forEach(e1=>{
e1.addEventListener('click',portfolio);
})
aboutLink.forEach(e1=>{
e1.addEventListener('click',(e)=>{
e.preventDefault();
sectionsDissapear();
aboutSection.style.display="block";
});
})
contactLink.forEach(e1=>{
e1.addEventListener('click',(e)=>{
e.preventDefault();
sectionsDissapear();
contactSection.style.display="block";
});
});
artystyczneLink.addEventListener('click',()=>{
sectionsDissapear();
artystyczneSection.style.display="block";
});
eventyLink.addEventListener('click',()=>{
sectionsDissapear();
eventySection.style.display="block";
});
pleneryLink.addEventListener('click',()=>{
sectionsDissapear();
plenerySection.style.display="block";
});
portretyLink.addEventListener('click',()=>{
sectionsDissapear();
portretySection.style.display="block";
});
sensualLink.addEventListener('click',()=>{
sectionsDissapear();
sensualSection.style.display="block";
});
studioLink.addEventListener('click',()=>{
sectionsDissapear();
studioSection.style.display="block";
});
//Portfolio back
back1.addEventListener('click',portfolio);
back2.addEventListener('click',portfolio);
back3.addEventListener('click',portfolio);
back4.addEventListener('click',portfolio);
back5.addEventListener('click',portfolio);
back6.addEventListener('click',portfolio);
});