Question

我正在尝试构建像http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/这样的扩展预览。

但我需要根据我的要求定制它。

请检查this fiddle。

我面临的问题是：

指针未正确指向图像。（它指向但隐藏在盒子后面）
点击第一张图片时，右边的所有元素都会向下移动。

除此之外，我还想问一下，我们能否将所有8个圆形div整合在一起？

谢谢。

＆＃13;

jQuery(document).ready(function() {
  $(".mn").click(function() {
    var activeTab = $(this).attr("href"); //Find the target via the href
    if ($(activeTab).is(':visible')) {
      $(activeTab).slideUp();
      $(this).removeClass("active");
    } else {
      $(".mn").removeClass("active"); //Remove any "active" class
      $(this).addClass("active")
      $('.tab').hide();
      $(activeTab).fadeIn();
    }
    return false;
  });
});

＆＃13;

.wrap {
  max-width: 100%;
  margin: auto;
}

.mn.active:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  margin: 0 0 0 -6px;
  /*width: 0;*/
  /*height: 0;*/
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid red;
}

.img-circle {
  border-radius: 50%;
}

.img-circle {
  border-radius: 0;
}

.ratio {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto;
  height: 0;
  padding-bottom: 100%;
  position: relative;
  width: 100%;
}

.img-circle {
  border-radius: 50%;
}

.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

.mn.active,
.mn:focus {
  background: #f9f9f9;
  outline: none
}

.tab {
  display: none;
  clear: both;
  margin: 0 2% 10px 0;
  background: red;
  min-height: 100px;
  width: 100%;
  padding: 5px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="wrap">

  <div class="col-sm-2">
    <a href="#tab1" class="mn">
      <div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
      <div class="text-center">1</div>
    </a>
  </div>
  <div id="tab1" class="tab">Tab 1</div>

  <div class="col-sm-2">
    <a href="#tab2" class="mn">
      <div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
      <div class="text-center">2</div>
    </a>
  </div>
  <div id="tab2" class="tab">Tab 2</div>

  <div class="col-sm-2">
    <a href="#tab3" class="mn">
      <div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
      <div class="text-center">3</div>
    </a>
  </div>
  <div id="tab3" class="tab">Tab 3</div>

  <div class="col-sm-2">
    <a href="#tab4" class="mn">
      <div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
      <div class="text-center">4</div>
    </a>
  </div>
  <div id="tab4" class="tab">Tab 4</div>

  <div class="col-sm-2">
    <a href="#tab5" class="mn">
      <div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
      <div class="text-center">5</div>
    </a>
  </div>
  <div id="tab5" class="tab">Tab 5</div>

  <div class="col-sm-2">
    <a href="#tab6" class="mn">
      <div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
      <div class="text-center">6</div>
    </a>
  </div>
  <div id="tab6" class="tab">Tab 6</div>

  <div class="col-sm-2">
    <a href="#tab7" class="mn">
      <div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
      <div class="text-center">7</div>
    </a>
  </div>
  <div id="tab7" class="tab">Tab 7</div>

  <div class="col-sm-2">
    <a href="#tab8" class="mn">
      <div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
      <div class="text-center">8</div>
    </a>
  </div>
  <div id="tab8" class="tab">Tab 8</div>
</div>

＆＃13;

Answer 1

请检查这个小提琴：https://jsfiddle.net/LyL8vkmr/4/

我将每个c_a c_b c_d 4.0 0 hello python pandas 1.2放在col-sm-2中，然后将所有标签放在单独的<div class="row"></div>中。现在，当您点击一个圆圈时，它会在其下方的行中打开一个标签，然后推送下一行中的所有圆圈。但是它仍然无法正常工作，因为当您将其调整为小尺寸并单击圆圈时，该选项卡会在该行的最底部打开，您无法轻松查看。

另请注意，我已将<div class="row"></div>更改为col-sm-2，因为您说您想要连续8个div。唯一的问题是它不会伸展100％。如果您希望8列完全拉伸，则需要使用自定义版本的bootstrap。 Just go here并输入8作为@ grid-columns字段。

响应式自定义扩展预览

1 个答案: