Question

我是网络编码的新手，我正在尝试使用bootstrap为在线投资组合创建一个艺术项目网格。

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

目前，当我点击“视频”文本时，它会根据需要隐藏所有不是视频项目的内容，但如果我点击“照片”，视频项目将隐藏，照片项目仍将被隐藏并赢得' t show。

这是我的代码：

<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>

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

Answer 1

下面是一个非常基本的jQuery解决方案，用于实现show and hide功能。首先为链接分配一个ID，然后使用jQuery的click()方法启动click事件。 e.preventDefault()用于覆盖浏览器的默认点击行为。

要实施节目和隐藏，请调用show(), hide()或slideUp(), slideDown()方法。有很多方法可以做到这一点。但这是其中一种选择。

＆＃13;

$('#video').click(function(e) {
  e.preventDefault();
  $('.novideotag, .design').slideUp();
  $('.nophototag').slideDown();
});

$('#photo').click(function(e) {
  e.preventDefault();
  $('.nophototag, .design').slideUp();
  $('.novideotag').slideDown();

});

$('#design').click(function(e) {
  e.preventDefault();
  $('.nophototag, .novideotag').slideUp();
  $('.design').slideDown();

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron text-center">
  <a href="#novideotag" class="btn tagbtn" data-toggle="collapse" id="video">Video</a> |
  <a href="#nophototag" class="btn tagbtn" data-toggle="collapse" id="photo">Photo</a> |
  <a href="#design" class="btn tagbtn" data-toggle="collapse" id="design">Design</a>
</div>

<div class="container-fluid">
  <div class="row-fluid text-center">
    <div class="collapse in col-xs-4 col-sm-4 col-md-4 novideotag">
      <img src="http://placehold.it/200x200" />
      <p>example: photo project 1</p>
    </div>
    <div class="collapse in col-xs-4 col-sm-4 col-md-4 nophototag">
      <img src="http://placehold.it/200x200" />
      <p>example: video project 1</p>
    </div>
    <div class="collapse in col-xs-4 col-sm-4 col-md-4 design">
      <img src="http://placehold.it/200x200" />
      <p>example: Design Project</p>
    </div>
  </div>

＆＃13;

Bootstrap 3崩溃（仅显示特定列）

1 个答案: