Question

我试图让一个向下箭头滑动到活动div，就像方形空间网站一样：http://www.squarespace.com/about/contact。

到目前为止，我已经使用css和jquery使用箭头显示在活动的，单击的div上，但是我希望箭头滑动到活动div而不是仅使用addClass和removeClass显示和消失。

非常感谢任何帮助！

活跃箭头的CSS：

  .arrow_box {
    position: relative;
    cursor: pointer;

}
.arrow_box.active:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0,0,0,0);
    border-top-color: #111;
    border-width: 30px;
    margin-left: -30px;
    z-index: 2000;

}

Jquery将箭头活动类添加到单击的div：

 $('#click').click(function(){
    $(".arrow_box").removeClass("active");
        $(this).toggleClass("active");

 $('#click2').click(function(){
    $(".arrow_box").removeClass("active");
        $(this).toggleClass("active");

 $('#click3').click(function(){
    $(".arrow_box").removeClass("active");
        $(this).toggleClass("active");

HTML：

<div  id="click" class="four columns arrow_box active">
    <h5 class="center whitetext thin">GENERAL</h5>

</div>
<div id="click2" class="four columns arrow_box">
    <h5 class="center whitetext thin">USERS</h5>

</div>
<div id="click3" class="four columns arrow_box">
    <h5 class="center whitetext thin">AGENTS</h5>

</div>

我通过在div下放置一个arrow_box然后使用.animate（）在相应的活动div下移动箭头来解决这个问题。最后很简单！

使用jquery创建活动类三角形幻灯片

0 个答案: