当前位置：首页 > JavaScript

js实现点击切换

2026-03-01 02:27:44JavaScript

点击切换的实现方法

通过JavaScript实现点击切换功能通常涉及监听点击事件并切换元素的显示状态或样式。以下是几种常见场景的实现方式。

切换类名改变样式

通过点击事件切换元素的类名，从而改变其样式：

const button = document.querySelector('.toggle-button');
const element = document.querySelector('.target-element');

button.addEventListener('click', () => {
  element.classList.toggle('active');
});

CSS部分需定义切换前后的样式差异：

.target-element {
  background: #ccc;
}
.target-element.active {
  background: #f00;
}

切换显示/隐藏状态

通过修改display属性实现元素的显示与隐藏：

const toggleBtn = document.getElementById('toggle-btn');
const content = document.getElementById('content');

toggleBtn.addEventListener('click', () => {
  if (content.style.display === 'none') {
    content.style.display = 'block';
  } else {
    content.style.display = 'none';
  }
});

切换多个状态

使用变量记录当前状态并实现多状态切换：

const cycleBtn = document.getElementById('cycle-btn');
const box = document.getElementById('box');
let currentState = 0;

cycleBtn.addEventListener('click', () => {
  currentState = (currentState + 1) % 3;

  box.className = '';
  box.classList.add(`state-${currentState}`);
});

对应CSS需定义不同状态的样式：

.state-0 { background: red; }
.state-1 { background: blue; }
.state-2 { background: green; }

切换内容文本

通过点击事件修改元素的文本内容：

const textBtn = document.getElementById('text-btn');
const textElement = document.getElementById('text');

textBtn.addEventListener('click', () => {
  textElement.textContent = textElement.textContent === 'Hello' ? 'World' : 'Hello';
});

切换表单输入类型

常见于密码显示/隐藏功能：

const togglePassword = document.querySelector('#toggle-pwd');
const passwordField = document.querySelector('#password');

togglePassword.addEventListener('click', () => {
  const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
  passwordField.setAttribute('type', type);
});