HTML. Implementing the transition to the desired tab when clicking on a link on one page?

  • 0
    Hello! There is a one-page page. There are 6 buttons at the top, each button has a separate tab and its contents at the bottom of the page. Now, when you press any button, you scroll to the anchor at the bottom, and then you need to switch the tabs manually. Tell me how to make sure that when you click on a certain button, the desired tab and contents will open immediately.

    Button Code:
    <div class="button-wrapper">
       <a class="btn-solid-reg page-scroll" href="#features">MORE...</a>
    </div>


    Tab switcher code:
    <ul class="nav nav-tabs" id="argoTabs" role="tablist">
       <li class="nav-item">
       <a class="nav-link active" id="nav-tab-1" data-toggle="tab" href="#tab-1" role="tab" aria-controls="tab-1" aria-selected="false"><i class="fas fa-list"></i>EPC Auto Forge</a>
       </li>
       <li class="nav-item">
       <a class="nav-link" id="nav-tab-2" data-toggle="tab" href="#tab-2" role="tab" aria-controls="tab-2" aria-selected="false"><i class="fas fa-list"></i>All Data Online</a>
       </li>
       </li>
    </ul>


    Tab content code:
    <div class="tab-content" id="argoTabsContent">
       <div class="tab-pane fade show active" id="tab-1" role="tabpanel" aria-labelledby="tab-1">
           .......
       </div>
       <div class="tab-pane fade" id="tab-2" role="tabpanel" aria-labelledby="tab-2">
           .......
       </div>


    I would be grateful for your help.
    JavaScript Juliet Spears, Aug 21, 2019

  • 3 Answers
  • 0
    Did something similar. Scroll to the anchor inside the tab, it might help.



    Anonymous

  • 0
    listen for the hashchange event and include the tab you want.



    window.addEventListener('hashchange', function(evt) {
    const hash = location.hash;
    console.log('hash changed to', hash);
    // activateTab(hash) // эту функцию напишите сами, или может у вас во фреймворке уже есть что-то такое
    });
    Autumn Christian

  • 0
    Thanks everyone, did it via document.getElementById.click ()
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!