如何实现Data-filter默认无内容显示，点击筛选后展示内容？

没问题，这个需求很容易实现，核心思路就是默认隐藏所有内容项，仅在点击筛选按钮时，根据按钮的data-filter值匹配并显示对应内容。我给你分步骤拆解：

1. 先通过CSS默认隐藏所有内容 #

首先给所有的内容项（.single_facilities）加上默认隐藏的样式，这样页面加载时就不会显示任何内容：

/* 默认隐藏所有筛选内容 */
.portfolio_item .single_facilities {
  display: none;
  /* 如果你的布局用了flex/grid，也可以用 visibility: hidden 或者 opacity: 0，但display:none更直接 */
}

2. 用JavaScript处理筛选点击事件 #

接下来需要给每个筛选按钮绑定点击事件，阻止默认跳转，然后根据data-filter的值显示对应内容。这里提供两种方案，选你项目在用的就行：

方案一：原生JavaScript（无依赖） #

// 获取所有筛选按钮和内容项
const filterBtns = document.querySelectorAll('.portfolio_filter li');
const contentItems = document.querySelectorAll('.portfolio_item .single_facilities');

// 遍历绑定点击事件
filterBtns.forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止a标签默认跳转
    const targetClass = this.getAttribute('data-filter');

    // 先隐藏所有内容
    contentItems.forEach(item => {
      item.style.display = 'none';
    });

    // 显示匹配筛选条件的内容
    const targetItems = document.querySelectorAll(targetClass);
    targetItems.forEach(item => {
      item.style.display = 'block'; // 这里根据你的布局调整，比如用flex/inline-block，确保样式正常
    });

    // 可选：给当前选中的按钮加高亮状态
    filterBtns.forEach(b => b.classList.remove('active'));
    this.classList.add('active');
  });
});

方案二：jQuery（如果项目已引入jQuery） #

如果你的项目已经在用jQuery，代码会更简洁：

$(function() {
  // 页面加载时默认隐藏所有内容
  $('.portfolio_item .single_facilities').hide();

  $('.portfolio_filter li').click(function(e) {
    e.preventDefault();
    const filter = $(this).data('filter');

    // 隐藏所有内容，再显示目标内容
    $('.portfolio_item .single_facilities').hide();
    $(filter).show();

    // 可选：给选中按钮加高亮
    $('.portfolio_filter li').removeClass('active');
    $(this).addClass('active');
  });
});

3. 可选优化：添加选中按钮的样式 #

为了让用户清楚当前选中的筛选项，可以给active类加个样式：

.portfolio_filter li.active a {
  color: #ff6b6b; /* 替换成你需要的高亮颜色 */
  border-bottom: 2px solid #ff6b6b;
}

注意事项 #

• 如果你用了Bootstrap这类框架，.col-sm-7依赖display: block或者flex，所以显示时用display: block就能保持原布局，不会错乱。
• 如果需要更平滑的过渡效果，可以把display换成opacity和visibility，配合CSS过渡动画：

  .portfolio_item .single_facilities {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }
  .portfolio_item .single_facilities.show {
    opacity: 1;
    visibility: visible;
  }
  

  然后JS里把style.display改成添加/移除show类即可。

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