如何通过点击Submit按钮切换Div的CSS类实现显示/隐藏

核心问题是submit按钮默认会触发表单提交并刷新页面，导致类切换的效果被页面重置。所以必须先阻止默认提交行为，再执行类切换操作。以下提供两种可行方案：

方案一：原生JavaScript实现 #

// 获取目标元素
const submitBtn = document.getElementById('btnSubmit');
const messageDiv = document.querySelector('.messages-hide');

// 绑定点击事件处理逻辑
submitBtn.addEventListener('click', function(event) {
  // 阻止表单默认提交行为，避免页面刷新
  event.preventDefault();
  
  // 移除隐藏类，添加显示类
  messageDiv.classList.remove('messages-hide');
  messageDiv.classList.add('messages-show');
  
  // 若需手动提交表单（比如完成类切换后再提交），取消下方注释：
  // this.form.submit();
});

方案二：jQuery实现 #

如果你的项目已经引入jQuery，可以用更简洁的写法：

$('#btnSubmit').click(function(event) {
  // 阻止默认提交行为
  event.preventDefault();
  
  // 替换类名
  $('.messages-hide').removeClass('messages-hide').addClass('messages-show');
  
  // 若需手动提交表单，取消下方注释：
  // $(this).closest('form').submit();
});

额外说明 #

• 如果你的需求是异步提交表单（不刷新页面），可以在类切换后通过AJAX处理提交逻辑，这样div的显示状态会保留。
• 若不需要保留表单提交功能，也可以把<input type="submit">改成<button type="button">，这样就不需要调用preventDefault()来阻止默认行为。

内容的提问来源于stack exchange，提问作者STEVEMTNO