Question

我试图隐藏/显示一些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>

Answer 1

如果您填写的div＃events-forms在单击按钮时没有高度，它的高度将变为0，然后再次展开以适合它的内容。这就是触发浏览器跳起来的原因，因为没有更多的内容可以显示。

- 如果可能，你可以给包含div＃event-forms一个固定的大小，所以只有内容在变化，而不是元素的高度。

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

- 否则你可能会先考虑更改包含div的高度（使用javascript / jquery）以适合要粘贴到其中的数据。

如果您使用以下css代码段，您可以看到div增长和扩展，这可能会让您更容易理解为什么要设置到页面顶部。

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

使用jQuery hide / show时跳转到页面顶部

1 个答案: