如何用JavaScript实现点击显示所有class为category36的div元素

很简单，这里有两种常用的实现方式，你可以根据项目的技术栈来选择：

原生JavaScript实现 #

如果项目没引入jQuery，用原生JS就能搞定，逻辑清晰易懂：

1. 获取「See more」按钮元素
2. 给按钮绑定点击事件，阻止默认的链接跳转行为（避免页面跳到顶部）
3. 选中所有class为category36的div，逐个设置它们的显示状态

// 获取按钮元素
const seeMoreBtn = document.getElementById('category36SeeMore');

// 绑定点击事件
seeMoreBtn.addEventListener('click', function(e) {
  // 阻止链接默认跳转行为
  e.preventDefault();
  
  // 获取所有目标div
  const categoryDivs = document.querySelectorAll('.category36');
  
  // 遍历并设置显示
  categoryDivs.forEach(div => {
    // 如果想恢复元素原本的display属性（比如不是block而是inline-block），可以用 div.style.display = '';
    div.style.display = 'block';
  });
  
  // 可选：点击后隐藏按钮，防止重复操作
  this.style.display = 'none';
});

jQuery实现 #

如果项目已经引入了jQuery，代码会更简洁：

$('#category36SeeMore').on('click', function(e) {
  // 阻止默认跳转
  e.preventDefault();
  
  // 显示所有category36的div
  $('.category36').show();
  
  // 可选：隐藏按钮
  $(this).hide();
});

小提示 #

• e.preventDefault() 建议加上，不然点击链接会让页面跳到顶部，影响用户体验。
• 如果你的div原本的显示样式不是block（比如flex、inline-block），原生JS里可以用div.style.display = ''移除行内的display:none，恢复元素默认的显示状态；jQuery的show()方法会自动处理这个场景，更省心。

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