Question

我想要实现的是在点击每个项目时移动div项目顶部的div项目...其余项目（未被点击的项目）将填充其余项目分别为div容器

HTML

    <div class="row">
        <div class="col-md-12">
            <div class="containing_div">
                <div class="container_div"></div>
                <div class="menu_div">
                    <div class="item_div">Photos</div>
                    <div class="item_div">Video</div>
                    <div class="item_div">Music</div>
                    <div class="item_div">Files</div>
                    <div class="item_div">Contacts</div>
                </div>
            </div>
        </div>
    </div>

CSS

.containing_div
{
  height: 100%;
}

.container_div
{
  background: #fff;
  height: 100%;
  width: 90%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  text-align: center;
  font-family: "Open Sans";
  font-size: 26px;
  float: left;
  padding-top: 25px;
  position: relative;
}

.menu_div
{
  background: transparent;
  float: left;
}

.item_div
{
  background: #ddd;
  height: 80px;
  color: #bbb;
  font-family: "Open Sans";
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 10px;
  text-align: center;
  padding: 8px;
  border-radius: 0 2% 2% 0;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  cursor: hand;
}

Answer 1

如果我正确地理解了你想要的东西，你可以通过一些jQuery实现你的目标，这要归功于prependTo方法。

Here the working example和jQuery函数。

$('.item_div').on('click',function(){
    $(this).prependTo('.container_div');
});

更新：

如果您只是想换位，here变种。

$('.item_div').on('click',function(){
    $(this).prependTo('.menu_div');
});

在被点击时将div项目移动到div容器的顶部

1 个答案: