Open page on specific tab using URL hash-PHP Chinese Network Q&A

Admittedly I'm a little lost on this since I'm very new to hashes, but I think this might be a solution to my problem so I'm hoping someone here might have some more insight. I have a webpage with multiple "tabs" (a div that hides information until the button is clicked, and a div that hides all other information until the button is clicked) and I want to be able to open to a specific tab from different webpages.< ;/p>

This is the skeleton of the previous web page. When you navigate to the page regularly, the first div is visible by default.

 content 
  content 
  content

On this page there are buttons that you can click to switch between these divs.

The javascript to switch between these is:

function commissionType(evt, commissionName) { var i,commissiontab; var x = document.getElementsByClassName("commission"); for (i = 0; i < x.length; i ) { x[i].style.display = "none"; } commissiontab = document.getElementsByClassName("commissiontab"); for (i = 0; i < x.length; i ) { commissiontab[i].className = commissiontab[i].className.replace(" selected", ""); } window.scrollTo({ top: 0, behavior: 'smooth' }); evt.currentTarget.className = " selected"; document.getElementById(commissionName).style.display = "grid"; }

Somehow I want to have these buttons on a different page ("index.html"), but when you click on the "third" you are taken to a new page ("commissiontypes.html") "Third" instead of the default "First".

If there are other solutions besides using hashes, I'd love to hear about it, thanks for taking a closer look.

reply all (1)

P粉4929595992023-09-05 09:19:37 1 floor

You can initially hide all elements using the'commission'class and then show only one of them when the page loads based onlocation.hash. This way, commissiontypes.html (and commissiontypes.html#first) will show the first div, commissiontypes.html#second will show the second div, etc.

document.querySelectorAll('.commission').forEach(x => x.style.display = 'none'); const activeEl = document.querySelector(location.hash || '#first'); activeEl.style.display = '';

(Alternatively, you may also consider using query parameters to indicate this section.)