Question 136755 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Using URL Hash to Open Page on Specific Tab

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.

Tags:

2

Answers


  1. 0

    You could initially hide all the elements with the 'commission' class, then display only one of them based on location.hash on page load. This way, commissiontypes.html (and commissiontypes.html#first) would display the first div, commissiontypes.html#second would display 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 could also consider using a query parameter to indicate the section.)

    Login or Signup to reply.
  2. 0

    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

    <nav>
  <button id="btn-first" class="commissiontab" onclick="commissionType('first')">first</button>
  <button id="btn-second" class="commissiontab" onclick="commissionType('second')">Second</button>
  <button id="btn-third" class="commissiontab" onclick="commissionType('third')">Third</button>
</nav>

<div id="first" class="commission" hidden>
  content #1
</div>

<div id="second" class="commission" hidden>
  content #2
</div>

<div id="third" class="commission" hidden>
  content #3
</div>

    JS

    function commissionType( select='first' ){
    // Get all tabs
    const tabs = document.getElementsByClassName('commission');
    const btns = document.getElementsByClassName('commissiontab');

    // Loop tabs and set to hidden
    for ( const tab of tabs || [] ){
        tab.setAttribute('hidden','');
    }

    // Loop btns and remove class selected
    for ( const btn of btns || [] ){
        btn.classList.remove('selected');
    }

    // Add selected class to correct button
    btns[ `btn-${select}` ].classList.add('selected');

    // Unhide the selected tab
    tabs[ select ].removeAttribute('hidden');

    // Scroll to the selected tab
    tabs[ select ].scrollIntoView()
}

window.addEventListener('load', function() {
    // Parse URL search params
    const params = new URLSearchParams( location.search );

    // Get tab from url or set to undefined
    const tab = params.get('tab') ?? undefined;

    // Run command to unhide tab
    commissionType( tab );
}, false);

    URL Examples

    https://example.com?tab=first
https://example.com?tab=second
https://example.com?tab=third
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search