更改標題部分的位置與可見內容部分的比例

我處於一種我無法弄清楚的情況。我有兩個.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

更改標題部分的位置與可見內容部分的比例

回答

相關問題