在提供淡入淡出效果后显示选项卡的内容

Question

在我的页面中，有许多选项卡，我想通过提供淡入淡出效果来显示选项卡的内容。 为了做到这一点，我需要在淡入淡出功能后具有类名称sectionContent的选项卡div为style =“ display：block”。 但是，当我从萤火虫看它们时，例如：

<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

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

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

Answer 2

让我首先从您的代码和说明中了解您的问题。

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

如果这是您的愿望，那么您可能会遇到选择器问题。 您正在使用$$选择器，但以下位置除外：

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

我认为这是问题所在。 您的firefox / chrome控制台是否显示任何问题？ 如果您尝试运行此命令怎么办：

$('lesson-'+tab)

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

试试这些，然后让我知道结果，我将尽力提供帮助。