给出淡入淡出效果后显示选项卡的内容

Question

在我的页面中有许多选项卡，我想通过淡化效果来显示选项卡的内容。为了做到这一点，我需要在淡入淡出函数之后具有类名 sectionContent 的选项卡 div 为 style="display:block"。但是，当我从 firebug 中查看它们时，它显示为例如：

<div id="lesson-grammar" class="sectionContent" style=""> 

因此该选项卡未显示。我怎样才能做到这一点？非常感谢。

new Ajax.Request(ajaxUrl,
  {
     method:'post',
     onSuccess: function(data){         
         var tmp=data.responseText;
         $$('.exercise-main .content').invoke('insert',tmp);
         $$('.exercise-main .sectionContent').invoke('setStyle','display:none');

         $('lesson-'+tab).fade({
             from:0,
             to:1,
             afterFinish: function(){
              //do the job                                     
             }
         });

     }
 });

<div class="exercise-main">
  <div class="content">
    <div id="lesson-discussion" class="sectionContent">  
     ...
    </div>
    <div id="lesson-grammar" class="sectionContent">  
     ...
    </div>
    <div id="lesson-dialogue" class="sectionContent">  
     ...
    </div>
   </div>
</div>

Answer 1

让我先从你的代码和你的解释中理解你的问题。

您想要实现的是在ajax响应到达后隐藏所有选项卡，将响应插入新选项卡，然后以淡入淡出效果显示？

如果这是您的愿望，那么您可能遇到了选择器问题。您正在使用 $$ 选择器，但一个地方除外：

$('lesson-'+tab).fade({...

我认为这是问题所在。您的 firefox/chrome 控制台是否显示任何问题？ 如果你尝试运行它会怎样：

$('lesson-'+tab)

会发生什么？您是否看到登录到控制台的正确 HTML 元素？

试试这些，然后告诉我结果，我会尽力提供帮助。

Answer 2

我认为您的样式声明的语法不正确。试试这个：

$$('.exercise-main .sectionContent').invoke('setStyle',{display: "none"});