javascript - 自定义图片展开预览标签错位

Question

我正在尝试制作类似于 this 的扩展图像预览但是当我在圆形 div 上从左向右移动时，选项卡从指针向下移动。我不明白为什么会这样。

请引用我的 fiddle link .

请帮我解决这个问题。我无法弄清楚我哪里出错了。

有没有办法根据圆形div的颜色动态改变指针颜色？

谢谢。

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;
  });
});

.wrap {
  max-width: 100%;
  margin: auto;
}

.full-width-div {
            position: relative;
            width: 100%;
            left: 0;
        }

.mn.active:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: auto;
  margin: 0 0 0 -12px;
  /*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: 12px 2% 10px 0;
  background: red;
  min-height: 100px;
  width: 100%;
  padding: 5px;
}

.col-custom-eight {
  position: relative;
  float: left;
  width: 12.5%;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
}

<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="full-width-div container">
    <div class="row">
      <div class="col-md-12">
        <div class="wrap">
          <div class="row">
    
            <div class="col-custom-eight col-sm-2">
              <a href="#tab1" class="mn">
                <div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #00BCD4;"></div>
                <div class="text-center caption">1</div>
              </a>
    
            </div>
    
    
            <div class="col-custom-eight 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 caption">2</div>
              </a>
    
            </div>
    
    
            <div class="col-custom-eight col-sm-2">
              <a href="#tab3" class="mn">
                <div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #795548;"></div>
                <div class="text-center caption">3</div>
              </a>
    
            </div>
    
    
            <div class="col-custom-eight col-sm-2">
              <a href="#tab4" class="mn">
                <div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FF9800;"></div>
                <div class="text-center caption">4</div>
              </a>
    
            </div>
    
    
            <div class="col-custom-eight col-sm-2">
              <a href="#tab5" class="mn">
                <div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #00BCD4;"></div>
                <div class="text-center caption">5</div>
              </a>
    
            </div>
    
    
            <div class="col-custom-eight col-sm-2">
              <a href="#tab6" class="mn">
                <div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #8BC34A;"></div>
                <div class="text-center caption">6</div>
              </a>
    
            </div>
    
    
            <div class="col-custom-eight col-sm-2">
              <a href="#tab7" class="mn">
                <div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #00BCD4;"></div>
                <div class="text-center caption">7</div>
              </a>
    
            </div>
    
    
            <div class="col-custom-eight col-sm-2">
              <a href="#tab8" class="mn">
                <div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #8BC34A;"></div>
                <div class="text-center caption">8</div>
              </a>
    
            </div>
    
          </div>
          <div class="row">
            <div class="col-md-12">
              <div id="tab1" class="tab" style="background-color: #00BCD4">Tab 1
                <div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
                <div class="col-md-4"></div>
                <div class="col-md-3"></div>
                <div class="col-md-2"></div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div id="tab2" class="tab" style="background-color: #FFC107">Tab 2
                <div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
                <div class="col-md-4"></div>
                <div class="col-md-3"></div>
                <div class="col-md-2"></div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div id="tab3" class="tab" style="background-color: #795548">Tab 3
                <div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
                <div class="col-md-4"></div>
                <div class="col-md-3"></div>
                <div class="col-md-2"></div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div id="tab4" class="tab" style="background-color: #FF9800">Tab 4
                <div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
                <div class="col-md-4"></div>
                <div class="col-md-3"></div>
                <div class="col-md-2"></div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div id="tab5" class="tab" style="background-color: #00BCD4">Tab 5
                <div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
                <div class="col-md-4"></div>
                <div class="col-md-3"></div>
                <div class="col-md-2"></div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div id="tab6" class="tab" style="background-color: #8BC34A">Tab 6
                <div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
                <div class="col-md-4"></div>
                <div class="col-md-3"></div>
                <div class="col-md-2"></div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div id="tab7" class="tab" style="background-color: #00BCD4">Tab 7
                <div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
                <div class="col-md-4"></div>
                <div class="col-md-3"></div>
                <div class="col-md-2"></div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div id="tab8" class="tab" style="background-color: #8BC34A">Tab 8
                <div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
                <div class="col-md-4"></div>
                <div class="col-md-3"></div>
                <div class="col-md-2"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>

Answer 1

您的行有 1 像素的高度，这导致指针在每个圆圈中下降 1 像素。我修好了你的 fiddle ，见here .

您可以仅使用 CSS 设置指针的颜色，例如:

 a[href="#tab1"]:after {
  border-bottom-color: rgb(0, 188, 212) !important;
}

a[href="#tab8"]:after {
  border-bottom-color: #8BC34A !important;
}