1

クリックされたボタンに応じて、いくつかの div を非表示/表示しようとしています。別のボタンをクリックして特定の div を表示するたびに、ページの上部にジャンプします。関連する場合は、Ruby on Rails も使用しています。return false も使用してみましたが、それも機能しません。誰にもアイデアはありますか？ありがとう。

Javascript:

$(document).ready(function(){
    $('#new-event-button').click(function(e){
        e.preventDefault();
        $('#edit-events').hide();
        $('#delete-events').hide();
        $('#new-event').slideDown();
    });
    $('#edit-events-button').click(function(e){
        e.preventDefault();
        $('#new-event').hide();
        $('#delete-events').hide();
        $('#edit-events').slideDown();
    });
    $('#delete-events-button').click(function(e){
        e.preventDefault();
        $('#new-event').hide();
        $('#edit-events').hide();
        $('#delete-events').slideDown();
    }); 
});

コードを表示:

<button id="new-event-button">New Event</button>
<button id="edit-events-button">Edit Events</button>
<button id="delete-events-button">Delete Events</button>

<div id="events-forms">
    <div id="new-event">
        <%= render :partial => "new_event", :locals => { :event => Event.new(:timeline_id=>@timeline.id) } %>
    </div>

    <div id="edit-events">
        <%= render :partial => "edit_events", :locals => { :events => current_user.events } %>  
    </div>

    <div id="delete-events">
        <%= render :partial => "delete_events", :locals => { :events => current_user.events } %>        
    </div>
</div>
4

1 に答える 1

2

ボタンをクリックしたときに入力している div#events-forms に高さがなければ、高さは 0 になり、コンテンツに合わせて再度拡張されます。表示するコンテンツがこれ以上ないため、ブラウザがジャンプして元に戻ります。

-可能であれば、含まれている div#event-forms に固定サイズを与えることができるので、要素の高さではなくコンテンツのみが変更されます。

#events-forms{
border: 1px solid black;
height:400px;

-それ以外の場合は、貼り付けたいデータに合わせて、最初に (javascript/jquery を使用して) 含まれている div の高さを変更することを検討できます。

次の css スニペットを使用すると、div が成長して拡大していることがわかります。これにより、ページの上部に設定されている理由を理解しやすくなります。

#events-forms{
    border: 1px solid black;
}
于 2012-10-15T13:02:14.990 に答える