Using same links in a same page

Thank you for give your time on my post :)

If you are okay, could you please give me any solutions or advice?

1. I am using same links under different tabs in a same page. All Contents in the page is basically hidden by using the CSS (Display: none), but the content under a tab can be shown by clicking its tab (Tab control).

2. And contents under a specific tab has their own headers containing its own link. So that I can go to its header by utilizing a navigation bar.

3. When I click a link on a navigation bar, I expected the link on the navigation bar can refer to a specific link on the header under active tab, as the other contents under inactive tab hide the contents with links, which I misunderstood. (I checked the inspection )

4. So I checked the page source using chrome, and If I understood correctly, the hidden HTML codes are just not shown from my eyes, but server still look at it, so that the links are still overlapped, and the links on the navigation bar are confused where to go.

Questions.

• Is it possible to disable links under inactive tabs temporally when I am on the selected tab?, so that I can make the navigation bar understand where the link in the bar should go correctly?

• Or do I have to assign different links to every headers in each tabs?

Below is excerption of my sample code,

HTML

<section id="Kinetic" class="tab_contents">

  <h1 id="kinetic-quick-start-guide">Kinetic Quick Start Guide</h1>

  <h2 id="pc-setup"><a href="#pc-setup">PC Setup</a></h2>

</section>

<section id="Melodic" class="tab_contents">
  <h1 id="melodic-quick-start-guide">Melodic Quick Start Guide</h1>

  <h2 id="windows-setup-remote-pc"><a href="#windows-setup-remote-pc">[Windows] Setup Remote PC</a></h2>

</section>

Javascript

    <script>
      $(function () {
        var currentHash = $(location).attr('hash');
        var filename = $(location).attr('href').split('/').reverse()[1];
        $(document).scroll(function () {
          $('.header-link').each(function () {
            var top = window.pageYOffset;
            var distance = top - $(this).offset().top;
            var rawHash = $(this).attr('href');
            var contentId = rawHash.replace('#', '');
            var tocId = rawHash.replace('#', filename+'_toc_');
            var searchContentId = $('#'+contentId);
            var searchTocId = $('#'+tocId);

            if (distance < 50 && distance > -50 && currentHash != tocId) {
              // window.history.pushState(window.location.href, "title", currentHash);   //Update browser URL history with current anchor
              if ((searchContentId.hasClass('class-h1') || searchContentId.hasClass('class-h2') || searchContentId.hasClass('class-h3')) && $('.nav__items').has('#'+tocId).length) {
                // console.log(contentId);
                // console.log(tocId);
                searchTocId.prop("checked", true);  //Open folded Toc menu
                $('.current_contents').removeClass("current_contents");
                
                //Check if Buttoned ToC with children
                // console.log(searchTocId);
                if( searchTocId.prop("tagName") == "INPUT" ) {
                  // console.log("input detected");
                  if( searchTocId.prop("name") == "sublevel" ) {
                    searchTocId.closest("li.has-grandchildren").find("label > button").addClass("current_contents");
                  }
                }
                else {
                  searchTocId.addClass("current_contents");
                }
                
                // Open folded Toc menu
                searchTocId.closest("li.has-grandchildren").find("input").first().prop("checked", true);
                searchTocId.closest("li.has-children").find("input").first().prop("checked", true);
                
                currentHash = tocId;
              }
            }
          });
        });
      });
    </script>
    <script>
      window.onscroll = function () {
        var offset = 64 - $(window).scrollTop();
        if(offset < 0) { offset = 0; }
        $(".sidebar__left").css("top", offset);       //sticky sidebar
        $(".extend_sidebar").css("top", offset);
        $(".local_navigation").css("top", offset);    //sticky local navigation
        $(".searchbox").css("top", offset);           //sticky searchbox
        // console.log(offset);
      };
    </script>
    <script>
      var toggle = 0;

      function extendnav() {
        if (toggle == 0) {
          sidebar__left.classList.add("extend_sidebar");
          toggle = 1;
        }
        else {
          sidebar__left.classList.remove("extend_sidebar");
          toggle = 0;
        }
      }
    </script>
    <script>
      function copyurl(item)
      {
        // location.href = item.href;
        var copiedurl = decodeURI(item.href);
        var tempurl = $('<input>').val(copiedurl).appendTo('body').select();
        document.execCommand('copy');
        // console.log(copiedurl);
        // document.getElementById(id).href;
        // document.execCommand('copy');
      }
    </script>
    <script>
      function movetopage(targeturl)
      {
        location.href=targeturl;
      }
    </script>