如何在一个页面上单击链接并同时更改另一个页面上特定 class 的位置？

Question

我在网站上设计了两个页面。我希望第二个选项卡 - btn，而不是第一个选项卡 - btn，具有 id = "default" 并在单击第 1 页上的链接并转到第 2 页时接受激活 class。 html代码中可以看到，tab1中正常id=”default”，activate class。但是当点击第1页的链接出现第2页时，不是tab1，而是第2个tab的id=”default " 和激活 class。同时，tab1 缺少 id = "default" 并且 class 被激活。 我可以用 JavaScript 管理吗？ 先谢谢各位朋友的配合

 //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

您可以检查第 2 页上的引荐页面，并执行您现有的 function 标签到 go 到第二个标签。 那时从第一个选项卡中删除 id 并将该属性添加到第二个 li。 我从选项卡 function 中删除了事件并仅使用了 tabid。

<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>