Hola entonces tengo pestañas usando javascript:
function openScreen(screen, button) { let i; const tabContent = document.getElementsByClassName("tab-content"); const tabButton = document.getElementsByClassName("tab-button"); for (i = 0; i < tabContent.length; i++) { tabContent[i].style.display = "none"; } document.getElementById(screen).style.display = "block"; for (i = 0; i < tabButton.length; i++) { tabButton[i].classList.remove('active'); } document.getElementById(button).classList.add('active'); } <div class="tab-links"> <button id="login-button" class="active tab-button" onclick="openScreen('Login', 'login-button')">Login</button> <button id="register-button" class="tab-button" onclick="openScreen('Register', 'register-button')">Register</button> </div> <div> <div id="Login" class="tab-content"> <p>Login</p> </div> <div id="Register" class="tab-content" style="display:none"> <p>Register</p> </div> </div> Y esto está funcionando, pero quiero hacerlo sin pasar ningún parámetro a la función y hacerlo sin usar la función onclick . Pero no me imagino cómo debo lograr esto.
Esta es una tarea perfecta para la delegación de eventos. Registras un oyente par para el evento de clic en el elemento que envuelve los botones y el contenido. En ese detector de eventos, puede usar e.target es el elemento a partir del cual se originó el evento. e.currentTarget es aquel en el que se adjuntó el oyente.
En el oyente, debe averiguar si realmente era el botón. Lo que podría hacerse comprobando una determinada propiedad (en este caso, el atributo data-target )
function openScreen(tabContainer, button) { // remove active class from tab-content and tab-button in the current tab container tabContainer.querySelectorAll(".tab-content.active, .tab-button.active").forEach(elm => { elm.classList.remove('active'); }) // add the active class to the button and the container set by the target let screen = button.dataset.target; document.getElementById(screen).classList.add('active'); button.classList.add('active'); } // Add the delegate event listener to all tab-conainers document.querySelectorAll(".tab-container").forEach(container => { container.addEventListener('click', (e) => { // check if the event happened on an element with the `data-target` attribute if (e.target.dataset.target) { const tabContainer = e.currentTarget const button = e.target openScreen(tabContainer, button) } }) }) .tab-content { display: none; } .tab-content.active { display: block; } <div class="tab-container"> <div class="tab-links"> <button id="login-button" data-target="Login" class="tab-button active">Login</button> <button id="register-button" data-target="Register" class="tab-button">Register</button> </div> <div> <div id="Login" class="tab-content active"> <p>Login</p> </div> <div id="Register" class="tab-content"> <p>Register</p> </div> </div> </div> <hr> <div class="tab-container"> <div class="tab-links"> <button id="login-button2" data-target="Login2" class="tab-button active">Login2</button> <button id="register-button2" data-target="Register2" class="tab-button">Register2</button> </div> <div> <div id="Login2" class="tab-content active"> <p>Login2</p> </div> <div id="Register2" class="tab-content"> <p>Register2</p> </div> </div> </div>Puede hacerlo con atributos de datos https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
breve ejemplo
<div class="tab" data-type="login"></div> <div class="tab" data-type="register"></div> Then const tabs = document.querySelectorAll('.tab'); for (let tab of tabs) { tab.onclick = function () { const type = this.dataset.type; /*now you can do all needed actions*/ } }¿Te refieres a algo como esto?
function openScreen(e) { const button = e.target; const { screen } = button.dataset; const tabs = document.querySelectorAll('.tab-content'); tabs.forEach(tab => tab.classList.toggle('active', screen === tab.id)); } const buttons = document.querySelectorAll('button'); buttons.forEach(button => button.addEventListener('click', openScreen)); .tab-content { display: none; } .tab-content.active { display: block; } <div class="tab-links"> <button id="login-button" class="active tab-button" data-screen="Login" >Login</button> <button id="register-button" class="tab-button" data-screen="Register" >Register</button> </div> <div> <div id="Login" class="tab-content active"> <p>Login</p> </div> <div id="Register" class="tab-content"> <p>Register</p> </div> </div>