0

我有一个显示页面，它使用 JQuery-ui 选项卡根据选项卡选择动态加载内容。

这是我的页面：

<%= stylesheet_link_tag 'upload.css', :media => 'screen' %>
<%= javascript_include_tag "tabs"%>

<div id="tabs">
    <ul>
        <li id="active"><%= link_to "Description" , :id => @upload.id, :action => "description"%></li>          
        <li><%= link_to "Images" , :id => @upload.id, :action => "images"%></li>
    </ul>

<div id="#content_area">
</div>
</div>

这是我的jQuery：

//= require jquery
//= require jquery-ui

$(document).ready(function(){
    var $tabs = $("#tabs").tabs({ select: function(event, ui) {
                                          $(ui.panel).empty();
                                      }
                               });
});

现在应该发生的是我单击一个选项卡，它会动态加载相应的内容并清除旧内容。就目前而言，当我单击选项卡时，它确实设法动态加载内容，但它并没有完全清除旧的东西。它的作用是在我单击选项卡并将其保留在那里时加载内容。但是，如果我要单击同一个选项卡，它将刷新内容。这不是我想要的，我只想在单击图像选项卡时查看图像内容，并在单击描述选项卡时查看描述内容。

如何修改我的 JQuery 来实现这一点？

4

1 回答 1

0

它现在通过更改 JQuery 以清除 JQuery-tab 动态创建的两个类来工作。我只是在通过 firebug 查看生成的 HTML 后才注意到它们（注意：我还添加了一些“正在加载...”文本以用于加载选项卡时）：

//= require jquery
//= require jquery-ui

$(document).ready(function(){
    var $tabs = $("#tabs").tabs({ select: function(event, ui) {                                         
                                          $("#ui-tabs-1").empty();
                                          $("#ui-tabs-2").empty();
                                          if($.data(ui.tab, 'load.tabs')) {
           $(ui.panel).html("Loading...");
       }

                                      }
                               });
});
于 2012-05-09T14:40:55.493 回答