How to click on a link on one page and change the location of a specific class on another page at the same time?

Question

I designed two pages on the website.I want the second tab - btn, instead of the first tab - btn, to have id = "default" and accept the activate class when the link on page 1 is clicked and goes to page 2. As you can see in the html code, there is normally id = "default" and the activate class in tab1.But when the link on page 1 is clicked and page 2 appears, instead of tab1, the second tab has id = "default" and an activate class. Meanwhile, tab1 lacks id = "default" and the class is activated. Can I manage this with JavaScript? Thank you in advance for your cooperation, friends

//codes of javascript for page: 2
function tabs(e,name){
    var tab_btn = document.getElementsByClassName('tab--btn');
    var tab_content = document.getElementsByClassName('tab--content');
    var supporItemsCard = document.querySelector('.support--items__card');
    var i;

    for( i = 0 ; i<tab_btn.length ; i++){
        tab_btn[i].classList.remove('active');
    }

    for(i = 0 ; i<tab_content.length ; i++){
        tab_content[i].style.display = 'none';
    }

    document.getElementById(name).style.display = 'block';
    e.currentTarget.classList.add('active');

}

document.getElementById('default').click();

page: 1
<a href=""> link page 1 </a>


page: 2
<ul class="support--items__cards">
  <li class="support--items__card tab--btn" id="default"     onclick="tabs(event,'tab1')">
        <h4 class="support--items__card__title">TAB 1</h4>
    </li>
  
  <li class="support--items__card tab--btn" onclick="tabs(event,'tab2')">
    <h4 class="support--items__card__title">TAB 2</h4>
  </li>
  
  <li class="support--items__card tab--btn" onclick="tabs(event,'tab3')">
    <h4 class="support--items__card__title">TAB 3</h4>
  </li>
<ul>

<div class="content">
  <div id="tab1" class="tab--content">
      content tab 1
  </div>
  
  <div id="tab2" class="tab--content">
      content tab 2
  </div>
  
  <div id="tab3" class="tab--content">
      content tab 3
  </div>
</div>

Answer 1

You can check the referrer page on page 2 and execute your already existing function tabs to go to second tab. At that time remove id from first tab and add that attribute to the second li. I removed event from tab function and used tabid only.

<ul class="support--items__cards">
  <li class="support--items__card tab--btn" id="default"     onclick="tabs('tab1')">
        <h4 class="support--items__card__title">TAB 1</h4>
    </li>

  <li class="support--items__card tab--btn" onclick="tabs('tab2')">
    <h4 class="support--items__card__title">TAB 2</h4>
  </li>

  <li class="support--items__card tab--btn" onclick="tabs('tab3')">
    <h4 class="support--items__card__title">TAB 3</h4>
  </li>
</ul>

<div class="content">
  <div id="tab1" class="tab--content">
      content tab 1
  </div>

  <div id="tab2" class="tab--content">
      content tab 2
  </div>

  <div id="tab3" class="tab--content">
      content tab 3
  </div>
</div>

<script>       
    var referrer =  document.referrer;
    //alert(referrer);
    
    if(referrer === "page1.html"){
        tabs('tab2');            
        var supporItemsCard = document.getElementsByClassName('support--items__card');
        supporItemsCard[0].removeAttribute("id");
        supporItemsCard[1].setAttribute("id", "default");            
    }

//codes of javascript for page: 2
function tabs(name){
    var tab_btn = document.getElementsByClassName('tab--btn');
    var tab_content = document.getElementsByClassName('tab--content');
    var supporItemsCard = document.querySelector('.support--items__card');
    var i;

    for( i = 0 ; i<tab_btn.length ; i++){
        tab_btn[i].classList.remove('active');
    }

    for(i = 0 ; i<tab_content.length ; i++){
        tab_content[i].style.display = 'none';
    }

    document.getElementById(name).style.display = 'block';
    document.getElementById(name).classList.add('active');

}
</script>