Twitter bootstrap 3 引导3折叠（仅显示特定列）

我完全不熟悉网络编码，我正在尝试使用bootstrap为在线投资组合创建一个艺术项目网格

我试图在单击相关按钮时在网格上显示特定列

当前，当我单击文本“视频”时，它会隐藏所有不是所需视频项目的内容，但如果我单击“照片”，则视频项目将隐藏，照片项目仍将隐藏且不会显示

这是我的密码：

<div class="jumbotron text-center">
  <a href=".novideotag" class="btn tagbtn" data-toggle="collapse">Video</a> |
  <a href=".nophototag" class="btn tagbtn" data-toggle="collapse">Photo</a>
</div>

<div class="container-fluid">
  <div class="row-fluid text-center">
    <div class="collapse in col-xs-6 col-sm-4 col-md-3 novideotag">
      <p>example: photo project 1</p>
    </div>
    <div class="collapse in col-xs-6 col-sm-4 col-md-3 nophototag">
      <p>example: video project 1</p>
  </div>
</div>

|
示例：照片项目1

示例：视频项目1

---

我希望能够单击“视频”并仅显示视频项目，单击“照片”并仅显示照片项目，但我不确定我的方式是否正确；也许需要一些javascript？

下面是实现显示和隐藏功能的非常基本的jQuery解决方案。首先为链接分配一个ID，并使用jQuery的

click（）

方法启动click事件<代码>e.preventDefault（）用于覆盖浏览器的默认单击行为

要实现显示和隐藏，请调用

show（）、hide（）

或

slideUp（）、slideDown（）

方法。有很多方法可以做到这一点。但这是一种选择

$（“#视频”）。单击（功能（e）{
e、 预防默认值（）；
$（'.novideotag.design'）.slideUp（）；
$（'.nophototag'）.slideDown（）；
});
$（“#照片”）。单击（功能（e）{
e、 预防默认值（）；
$（'.nophototag.design'）.slideUp（）；
$（'.novideotag'）.slideDown（）；
});
$（“#设计”）。单击（功能（e）{
e、 预防默认值（）；
$（'.nophototag.novideotag'）.slideUp（）；
$（'.design'）.slideDown（）；
});

|
|
示例：照片项目1

示例：视频项目1

示例：设计项目

当我运行代码片段时，这显然有效，但在我的文档中根本不起作用；它是完全没有反应的，除非我在novideotag之前加一个“.”，等等。在我不确定之后。我猜相对URL可能是造成无响应的原因之一。下面是一个例子：如你所见，如果你单击“视频摄影”，它只显示视频，但显示项目，然后单击“照片”和“设计项目”，它们将在不应该出现的时候出现。好吧，你需要相应地调整代码。查看我的编辑。或者使用
filter（）
查找特定的类。