Admittedly at a bit of a loss for this because I’m new to hashes but I think it might be the solution to my problem so I’m hoping someone here might have a little more insight. I have a webpage with several ‘tabs’ (divs of information hidden until their button is clicked, hiding all other divs of information until their buttons are clicked) that I’d like to be able to open to a specific tab from a different webpage.
Here is a skeleton of the former webpage. The first div is visible by default when you navigate to the page regularly.
<div id="first" class="commission">
content
</div>
<div id="second" class="commission" style="display:none;">
content
</div>
<div id="third" class="commission" style="display:none;">
content
</div>
And on this webpage there are the buttons that you click to go between these divs.
<button class="commissiontab" onclick="commissionType(event, 'first')">first</button>
<button class="commissiontab" onclick="commissionType(event, 'second')">Second</button>
<button class="commissiontab" onclick="commissionType(event, 'third')">Third</button>
With the javascript for going between these being as follows:
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’d like to have these buttons on a different page (‘index.html’), but when you click ‘Third’ for example you’re brought to the new page (‘commissiontypes.html’) with ‘Third’ selected instead of the default, ‘First’.
If there is a solution for this other than using hashes I’d love to hear, thank you for looking this over.
2
Answers
You could initially hide all the elements with the
'commission'
class, then display only one of them based onlocation.hash
on page load. This way,commissiontypes.html
(andcommissiontypes.html#first
) would display the first div,commissiontypes.html#second
would display the second div, etc.(Alternatively, you could also consider using a query parameter to indicate the section.)
I think what you are trying to achieve is open different sections on the same page. The following example shows how you can have all your code on one page and interact with it. You can also open any section using the url. Also a benefit of using the hidden attribute is that you do not have to track what the display setting is before changing it to none.
HTML
JS
URL Examples