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;

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

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

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