如何实现div默认全显点击筛选，无需初始display:none且SEO友好？

你当前代码出现默认仅显示首个内容块的问题，完全来自CSS规则设置：

• 全局规则.result-content { display: none }把所有内容块默认设为隐藏
• 附加规则.result-content:first-of-type { display: block }单独把第一个内容块设为显示
  和JS逻辑没有关系。

另外初始直接给内容块设置display:none的写法确实存在SEO风险：多数搜索引擎爬虫首次抓取页面时不会执行JS，无法读取被CSS隐藏的内容，会影响页面内容收录。

核心逻辑调整：页面初始状态下不设置任何内容隐藏规则，所有内容默认全部展示，仅当用户主动点击筛选选项时，才通过类名控制非目标内容的隐藏，保证爬虫首次抓取时能获取到全部完整内容，完全符合SEO规范。

完整实现代码 #

CSS代码 #

删除原有默认隐藏内容、单独显示首个内容的规则，新增独立的隐藏工具类，仅给需要隐藏的元素动态添加该类：

.tab-link {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 0;
  cursor: pointer;
  text-decoration: none;
  color: #333;
}
/* 独立隐藏类，初始状态无元素携带该类，所有内容默认可见 */
.is-hidden {
  display: none;
}
/* 可选：当前选中筛选项的高亮样式 */
.tab-link.active {
  font-weight: 700;
  color: #165DFF;
}

JS代码 #

调整筛选交互逻辑，默认给「全部」选项加激活态，点击时动态切换内容的隐藏类：

// 初始化：给「全部」选项加选中态
$('.tab-link[data-div="widgets"]').addClass('active');

$('.tab-link').on('click', function() {
  const targetCategory = $(this).data('div');
  // 切换筛选项的选中状态
  $('.tab-link').removeClass('active');
  $(this).addClass('active');
  // 先清除所有内容的隐藏类，恢复全部展示
  $('.result-content').removeClass('is-hidden');
  // 选中非「全部」选项时，隐藏不匹配分类的内容
  if (targetCategory !== 'widgets') {
    $('.result-content').not(`.${targetCategory}`).addClass('is-hidden');
  }
})

HTML代码 #

原有结构基本无需调整，仅把a标签的href属性改为javascript:;，避免点击时触发页面跳转到顶部：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<a href="javascript:;" class="tab-link" data-div="widgets">All widgets</a>
<a href="javascript:;" class="tab-link" data-div="green-widgets">Green</a>
<a href="javascript:;" class="tab-link" data-div="red-widgets">Red</a>
<a href="javascript:;" class="tab-link" data-div="blue-widgets">Blue</a>

<div class="widgets green-widgets result-content">
  Widget 654
</div>
<div class="widgets green-widgets result-content">
  Widget 989
</div>
<div class="widgets green-widgets result-content">
  Widget 345
</div>
<div class="widgets red-widgets result-content">
  Widget 563
</div>
<div class="widgets red-widgets result-content">
  Widget 867
</div>
<div class="widgets blue-widgets result-content">
  Widget 994
</div>
<div class="widgets blue-widgets result-content">
  Widget 924
</div>
<div class="widgets blue-widgets result-content">
  Widget 114
</div>

方案说明 #

• 初始无任何硬编码的隐藏规则，所有内容默认渲染展示，搜索引擎可完整抓取全部内容，无SEO风险
• 隐藏逻辑通过独立工具类实现，和业务类名解耦，后续扩展分类、调整样式都不需要修改核心逻辑
• 增加了筛选项的选中态反馈，同时修复了原代码点击筛选标签页面跳回顶部的体验问题
• 代码轻量化，无额外依赖，兼容所有主流浏览器

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