更改标题部分的位置与可见内容部分的比例

我处于一种我无法弄清楚的情况。我有两个.content div。第一个内容div有标题和一些隐藏的块内容。第二个内容div有4个按钮。点击这个按钮会弹出相关的块。块根据我的要求有不同的边距。更改标题部分的位置与可见内容部分的比例

我想要的是标题应保持与所有块相同的距离比例。就像按下“块四按钮”一样，块4的内容将显示，并且标头将向下移动，保持与块1一样的边距。

enter image description here

我试图与位置固定的，但他并没有这样的。

这是可能改变标题的位置基于每个块内容保持比例与jquery或js的帮助吗？这对我来说真的很有帮助。我被困在这非常糟糕。我不是很擅长jQuery，如果可以用jquery完成这些工作，也无法做出来。

HTML

<div class="content"> 
    <div class="head">Head</div> 

    <div class="block" id="blk-1" style="margin-top:10px;"> 
     Block 1 Content 
    </div> 
    <div class="block" id="blk-2" style="margin-top:50px;"> 
     Block 2 Content 
    </div> 
    <div class="block" id="blk-3" style="margin-top:80px;"> 
     Block 3 Content 
    </div> 
    <div class="block" id="blk-4" style="margin-top:120px;"> 
     Block 4 Content 
    </div> 
</div> 

<div class="content"> 
    <button type="button" class="blk-1"> Block One </button> 
    <button type="button" class="blk-2"> Block Two </button> 
    <button type="button" class="blk-3"> Block Three </button> 
    <button type="button" class="blk-4"> Block Four </button> 

</div>

CSS

.content{ 
    width:30%; 
    float:left; 
    margin-right:10px; 
} 
.head{ 
    background:red; 
    height:20px; 
} 
.block{ 
    height:40px; 
    background:#20ccfc; 
    display:none; 
} 
button{ 
    margin-bottom:5px; 
}

$('.blk-1').click(function(){ 
    $(".block").hide(); 
    $("#blk-1").fadeIn(); 
}); 
$('.blk-2').click(function(){ 
    $(".block").hide(); 
    $("#blk-2").fadeIn(); 
}); 
$('.blk-3').click(function(){ 
    $(".block").hide(); 
    $("#blk-3").fadeIn(); 
}); 
$('.blk-4').click(function(){ 
    $(".block").hide(); 
    $("#blk-4").fadeIn(); 
});

来源

2014-09-02 Raihan

目前还不清楚你在问什么。你能更好地解释第二段吗？ – Tony 2014-09-02 20:43:32

这听起来像你可能想要使用航点库在向下滚动时粘贴标题？ http://imakewebthings.com/jquery-waypoints/ – briansol 2014-09-02 20:46:12

此图片可以帮助吗？ @Tony – Raihan 2014-09-02 20:48:46

是this你在找什么？

我取下了内嵌的style属性并放在css中，根据标题的位置使得.block div s的位置。您可以通过在每个点击事件中添加额外的jquery函数来修改标题的位置。

来源

2014-09-02 21:09:20 bowheart

完美！谢谢你，兄弟。 – Raihan 2014-09-02 21:14:32

更改标题部分的位置与可见内容部分的比例

回答

相关问题