javascript - javascript选项卡没有传递任何参数来运行

Question

您好，所以我有使用 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>

这是可行的，但我想在不向函数传递任何参数的情况下执行此操作，并且不使用onclick函数来执行此操作。但我不知道我应该如何实现这一目标。

标签： javascript

Answer 1

这是事件委托的完美任务。您为包装按钮和内容的元素上的单击事件注册了一个偶数侦听器。在该事件侦听器中，您可以使用e.target事件起源的元素。e.currentTarget是侦听器所附加的那个。

在侦听器中，您需要确定它是否真的是按钮。这可以通过检查某个属性来完成（在这种情况下是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>