0

私のページにはいくつかのタブがあり、フェード効果を与えてタブの内容を表示したいと思います。これを行うには、fade関数の後に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>
4

2 に答える 2

0

あなたのスタイル宣言は正しい構文ではないと思います。これを試して：

$$('.exercise-main .sectionContent').invoke('setStyle',{display: "none"});
于 2012-06-01T14:33:12.523 に答える
0

あなたのコードと説明から、まずあなたの問題を理解させてください。

あなたが達成したいのは、ajax応答が到着した後にすべてのタブを非表示にし、応答を新しいタブに挿入してから、フェードイン効果で表示することですか?

これがあなたの望みなら、おそらくセレクターに問題があります。1 か所を除いて $$ セレクターを使用しています。

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

これが問題だと思います。Firefox/Chrome コンソールに問題はありませんか? これを実行しようとするとどうなりますか：

$('lesson-'+tab)

何が起こりますか？コンソールにログインした適切な HTML 要素が表示されますか?

これらを試してから、結果をお知らせください。お手伝いします。

于 2012-06-01T14:50:49.020 に答える