Diseñé dos páginas en el sitio web. Quiero que la segunda pestaña - btn, en lugar de la primera pestaña - btn, tenga id = "predeterminado" y acepte la clase de activación cuando se haga clic en el enlace de la página 1 y vaya a la página 2. Como puede ver en el código html, normalmente hay id = "predeterminado" y la clase de activación en tab1. Pero cuando se hace clic en el enlace de la página 1 y aparece la página 2, en lugar de tab1, la segunda pestaña tiene id = "predeterminado". " y una clase de activación. Mientras tanto, tab1 carece de id = "predeterminado" y la clase está activada. ¿Puedo manejar esto con JavaScript? Gracias de antemano por su cooperación, amigos.
//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>Puede consultar la página de referencia en la página 2 y ejecutar las pestañas de función ya existentes para ir a la segunda pestaña. En ese momento, elimine la identificación de la primera pestaña y agregue ese atributo a la segunda li. Eliminé el evento de la función de pestaña y usé tabid solamente.
<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>