1

mootools1.2バージョンを使用して非常にシンプルなタブインターフェースを作成しようとしています。スライドやモーフィングがなく、フェードインフェードアウト効果が必要です。私はいくつかのデモをオンラインで見つけようとしましたが、それらはすべて異なるバージョンのmootoolsを参照しているか、私のニーズに比べて複雑すぎます。ガイドラインを教えてください。

これは私がやろうとしていることの画像とサンプルコードです。

代替テキストhttp://img204.imageshack.us/img204/4983/tabsd.jpg

<ul id="buttons">
     <li><a href="#">button 1</a></li>
     <li><a href="#">button 2</a></li>
     <li><a href="#">button 3</a></li>
     <li><a href="#">button 4</a></li>
</ul>

<div id="tab1">content for button 1</div>
<div id="tab2">content for button 2</div>
<div id="tab3">content for button 3</div>
<div id="tab4">content for button 4</div>
  • ページの読み込み時にすべてのタブを非表示にする必要があります。
  • ユーザーがボタンをクリックするたびに、それが参照しているdiv/tabがフェードインするはずです。
4

2 に答える 2

1

また、mootools forgeを検索して、既製のタブ実装のいずれかがニーズに合っているかどうかを確認することもできます。

MootoolsForgeタブの実装

于 2010-02-02T09:20:08.973 に答える
1

完全なコードではありませんが、次のように機能する必要があります。

window.addEvent('domready',function(){

  var tabs = $$('div[id^="tab"]');
  tabs.fade('hide');

  $$('#buttons li').each(function(element,index){
      element.addEvent('click',function(){
          tabs.fade(0);
          tabs[index].fade(1);
      });
  });
})​;​
于 2010-01-25T22:22:34.557 に答える