如何使用jQuery将点击的位置更改为父div的中心？

时间：2017-01-13 12:12:59

标签： javascript jquery html css jquery-selectors

我试图在点击链接时将div移动到父div的中心。

我目前有3个链接，它们对应3个div。当您单击链接时，它对应的div将被放大（使用css过渡）。到目前为止这种方法运作良好。正确的链接会扩大正确的div。

div放大后（为了让它脱颖而出）我需要div移动到中心，我需要已经在中心的div来取其他div。 这是我正在努力实现的目标。我尝试过使用jQuery＆＃39; append，prepend，animate并使用closest但是我不知道如何让div移动到中心并让中心的div移动到最近的div位置。

我希望到目前为止这是有意义的。我找到了 this 小提琴链接（来自关于SO的问题）并且它移动了div但是它不太正确。

这是我的HTML结构：

<div class="test">
  <div class="test-links">
    <ul>
        <li><a data-target=".ecommerce" href="#">Ecommerce</a></li>
        <li><a data-target=".cloud" href="#">Cloud</a></li>
        <li><a data-target=".amazon" href="#">Amazon</a></li>  
    </ul>
  </div>
  <div class="test-slider">
    <div class="test-slide ecommerce">
      Ecommerce
    </div>
    <div class="test-slide cloud">
      Cloud
    </div>
    <div class="test-slide amazon">
      Amazon
    </div>
  </div>
</div>

这是相应的jQuery：

$(document).ready(function() {
  $(".test-links a").click(function() {
    var $target = $($(this).data('target'));
    $(".test-slide").not($target).removeClass('active');
    $target.addClass('active');
    return false
  });
});

Here 是到目前为止完整工作示例的链接。

3 个答案:

答案 0 :(得分：4)

试试这个。

找到.test-slider div中div元素中单击的元素的索引，并将其插入中间位置。

＆＃13;
＆＃13; 
$(document).ready(function() {
  $(".test-links a").click(function() {
    var $target = $($(this).data('target'));
    $(".test-slide").not($target).removeClass('active');
    $target.addClass('active');
    
    $(".test-slider div").each(function(index,elem)
    {
      if($(elem).text() == $target.text())
      {
        if(index > 1)
        $(elem).insertBefore($(".test-slider div").eq(1));
        if(index < 1)
        $(elem).insertBefore($(".test-slider div").eq(2));
      }
    });
    
    
    
    return false
  });
});
＆＃13; 
.test {
  float: left;
  width: 100%;
  text-align: center;
}

.test-links {
  float: left;
  width: 100%;
  margin: 30px 0;
}

.test-links ul {
  list-style-type: none;
  float: left;
  width: 100%;
  margin: 0;
}

.test-links ul li {
  display: inline-block;
  float: left;
}

.test-links ul li a {
  display: block;
  padding: 30px;
}

.test-slide {
  float: left;
  width: 33.33333%;
  height: 200px;
  color: #fff;
  transition: all 300ms ease;
  opacity: 0.8;
  position: relative;
  z-index: 0;
}

.ecommerce {
  background: blue;
}

.cloud {
  background: red;
}

.amazon {
  background: grey;
}

.test-slide.active {
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  color: #e67e22;
  opacity: 1;
  transform: scale(1.08);
  position: relative;
  z-index: 1;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <div class="test-links">
    <ul>
      <li><a data-target=".ecommerce" href="#">Ecommerce</a></li>
      <li><a data-target=".cloud" href="#">Cloud</a></li>
      <li><a data-target=".amazon" href="#">Amazon</a></li>
    </ul>
  </div>
  <div class="test-slider">
    <div class="test-slide ecommerce">
      Ecommerce
    </div>
    <div class="test-slide cloud">
      Cloud
    </div>
    <div class="test-slide amazon">
      Amazon
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

编辑：以下代码段是针对此问题的更好的通用解决方案。

＆＃13;
＆＃13; 
$(document).ready(function() {
  $(".test-links a").click(function() {
    var $target = $($(this).data('target'));
    $(".test-slide").not($target).removeClass('active');
    $target.addClass('active');
    
    var len = $(".test-slider div").length;
    
    var mid = (Math.floor(len/2));
    
    $(".test-slider div").each(function(index,elem)
    {
      if($(elem).text() == $target.text())
      {
        if(index > mid)
        $(elem).insertBefore($(".test-slider div").eq(mid));
        if(index < mid)
        $(elem).insertBefore($(".test-slider div").eq(mid+1));
      }
    });
    
    
    
    return false
  });
});
＆＃13; 
.test {
  float: left;
  width: 100%;
  text-align: center;
}

.test-links {
  float: left;
  width: 100%;
  margin: 30px 0;
}

.test-links ul {
  list-style-type: none;
  float: left;
  width: 100%;
  margin: 0;
}

.test-links ul li {
  display: inline-block;
  float: left;
}

.test-links ul li a {
  display: block;
  padding: 30px;
}

.test-slide {
  float: left;
  width: 20%;
  height: 200px;
  color: #fff;
  transition: all 300ms ease;
  opacity: 0.8;
  position: relative;
  z-index: 0;
}

.ecommerce {
  background: blue;
}

.cloud {
  background: red;
}

.amazon {
  background: grey;
}

.paypal {
  background: yellow;
}

.cisco {
  background: green;
}

.test-slide.active {
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  color: #e67e22;
  opacity: 1;
  transform: scale(1.08);
  position: relative;
  z-index: 1;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <div class="test-links">
    <ul>
      <li><a data-target=".ecommerce" href="#">Ecommerce</a></li>
      <li><a data-target=".cloud" href="#">Cloud</a></li>
      <li><a data-target=".amazon" href="#">Amazon</a></li>
       <li><a data-target=".paypal" href="#">Paypal</a></li>
        <li><a data-target=".cisco" href="#">Cisco</a></li>
    </ul>
  </div>
  <div class="test-slider">
    <div class="test-slide ecommerce">
      Ecommerce
    </div>
    <div class="test-slide cloud">
      Cloud
    </div>
    <div class="test-slide amazon">
      Amazon
    </div>
    <div class="test-slide paypal">
      Paypal
    </div>
    <div class="test-slide cisco">
      Cisco
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

使用insertAfter()的解决方案 - 此移位 div位置，将放置在第一个div之后。

见下面的演示：

$(document).ready(function() {
  $(".test-links a").click(function() {
    var $target = $($(this).data('target'));
    $(".test-slide").not($target).removeClass('active');
    
    if ($target.is('.test-slider .test-slide:first-child'))
      $target.addClass('active').insertAfter('.test-slider .test-slide:nth-child(2)');
    else
      $target.addClass('active').insertAfter('.test-slider .test-slide:first-child');
    return false
  });
});
.test {
  float: left;
  width: 100%;
  text-align: center;
}
.test-links {
  float: left;
  width: 100%;
  margin: 30px 0;
}
.test-links ul {
  list-style-type: none;
  float: left;
  width: 100%;
  margin: 0;
}
.test-links ul li {
  display: inline-block;
  float: left;
}
.test-links ul li a {
  display: block;
  padding: 30px;
}
.test-slide {
  float: left;
  width: 33.33333%;
  height: 200px;
  color: #fff;
  transition: all 300ms ease;
  opacity: 0.8;
  position: relative;
  z-index: 0;
}
.ecommerce {
  background: blue;
}
.cloud {
  background: red;
}
.amazon {
  background: grey;
}
.test-slide.active {
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  color: #e67e22;
  opacity: 1;
  transform: scale(1.08);
  position: relative;
  z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="test">
  <div class="test-links">
    <ul>
      <li><a data-target=".ecommerce" href="#">Ecommerce</a>
      </li>
      <li><a data-target=".cloud" href="#">Cloud</a>
      </li>
      <li><a data-target=".amazon" href="#">Amazon</a>
      </li>
    </ul>
  </div>
  <div class="test-slider">
    <div class="test-slide ecommerce">
      Ecommerce
    </div>
    <div class="test-slide cloud">
      Cloud
    </div>
    <div class="test-slide amazon">
      Amazon
    </div>
  </div>
</div>

答案 2 :(得分：-1)

可以试试这段代码。我刚刚在jsfiddle上修改了你的代码： 见这里：https://jsfiddle.net/6v37ue4y/10/

＆＃13;
＆＃13; 
$(document).ready(function() {
  $(".test-links a").click(function() {
    var $target = $($(this).data('target'));
    $(".test-slide").not($target).removeClass('active');
    $target.addClass('active');
    return false
  });
  $('.test-slider div').click(function(e){
 	   var indx = $( ".test-slider div" ).index( $(this) ) ;
    // alert(indx);
     if(indx == 0){
       $(this).next('div').after($(this));
     } else if(indx == 2){
         $(this).prev('div').before($(this));
     } else {
     
     }
  });
});
＆＃13; 
.test {
  float: left;
  width: 100%;
  text-align: center;
}

.test-links {
  float: left;
  width: 100%;
  margin: 30px 0;
}

.test-links ul {
  list-style-type: none;
  float: left;
  width: 100%;
  margin: 0;
}

.test-links ul li {
  display: inline-block;
  float: left;
}

.test-links ul li a {
  display: block;
  padding: 30px;
}

.test-slide {
  float: left;
  width: 33.33333%;
  height: 200px;
  color: #fff;
  transition: all 300ms ease;
  opacity: 0.8;
  position: relative;
  z-index: 0;
}

.ecommerce {
  background: blue;
}

.cloud {
  background: red;
}

.amazon {
  background: grey;
}

.test-slide.active {
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  color: #e67e22;
  opacity: 1;
  transform: scale(1.08);
  position: relative;
  z-index: 1;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="test">
  <div class="test-links">
    <ul>
      <li><a data-target=".ecommerce" href="#">Ecommerce</a></li>
      <li><a data-target=".cloud" href="#">Cloud</a></li>
      <li><a data-target=".amazon" href="#">Amazon</a></li>
    </ul>
  </div>
  <div class="test-slider">
    <div class="test-slide ecommerce">
      Ecommerce
    </div>
    <div class="test-slide cloud">
      Cloud
    </div>
    <div class="test-slide amazon">
      Amazon
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题