移除「全部」按钮后，如何为Bootstrap作品集设置默认指定分类

嘿，我来帮你搞定这个需求！想要页面加载时直接展示指定分类的项目，而不是全部内容，其实只需要在页面初始化阶段手动触发对应分类的筛选逻辑就行，结合常见的作品集实现场景，我给你具体的实现步骤：

1. 确认HTML结构的标识 #

首先确保你的分类按钮和作品集项目都有明确的分类标识，方便JS定位和筛选：

• 分类按钮：给每个按钮加上data-category属性，值对应分类名称
• 作品集项目：给每个项目元素加上data-project-category属性，值对应它所属的分类

示例HTML结构：

<!-- 分类按钮组 -->
<div class="category-buttons">
  <button class="category-btn" data-category="web-design">网页设计</button>
  <button class="category-btn" data-category="illustration">插画创作</button>
  <button class="category-btn" data-category="branding">品牌设计</button>
</div>

<!-- 作品集项目列表 -->
<div class="portfolio-grid">
  <div class="portfolio-item" data-project-category="web-design">网页项目1</div>
  <div class="portfolio-item" data-project-category="illustration">插画项目1</div>
  <div class="portfolio-item" data-project-category="web-design">网页项目2</div>
</div>

2. 编写通用的筛选函数 #

先写一个可以根据分类值筛选项目的函数，这个函数可以复用在按钮点击和页面初始化场景：

function filterProjects(targetCategory) {
  // 获取所有作品集项目
  const allProjects = document.querySelectorAll('.portfolio-item');
  
  allProjects.forEach(project => {
    // 匹配项目的分类和目标分类
    if (project.dataset.projectCategory === targetCategory) {
      project.style.display = 'block'; // 替换成你项目使用的布局样式，比如flex/grid
    } else {
      project.style.display = 'none';
    }
  });
  
  // 更新分类按钮的激活状态
  const allCategoryBtns = document.querySelectorAll('.category-btn');
  allCategoryBtns.forEach(btn => {
    btn.classList.remove('active');
    if (btn.dataset.category === targetCategory) {
      btn.classList.add('active');
    }
  });
}

3. 页面加载时触发默认分类筛选 #

在页面DOM加载完成后，调用上面的筛选函数，传入你想要默认展示的分类值：

// 等待DOM加载完成再执行
document.addEventListener('DOMContentLoaded', function() {
  // 替换成你想要默认展示的分类值，比如这里选"web-design"
  const defaultCategory = 'web-design';
  
  // 触发默认筛选
  filterProjects(defaultCategory);
});

额外注意事项 #

• 如果你的项目使用了CSS动画或者过渡效果，可以把display的切换改成添加/移除类名，比如给隐藏的项目加hidden类，这样过渡更平滑：

  .portfolio-item.hidden {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }
  

  然后在JS里替换成project.classList.add('hidden')和project.classList.remove('hidden')
• 确保你已经完全移除了和「全部」按钮相关的逻辑，避免冲突
• 如果分类值是动态生成的，只要保证defaultCategory的值和按钮、项目的分类标识一致即可

内容的提问来源于stack exchange，提问作者M. Straw