0

私はJQueryの初心者です（ただし、JSと他の言語でのプログラミングについてはある程度の知識があります）
。2つの目的があります。

  1. 非常に単純なタブ（またはコントロール用のもの）、クリックすると古い（アクティブな）タブコンテンツがフェードアウトし、次にクリックしたタブコンテンツがフェードイン（同じ場所）
  2. 1と同じですが、フェードの代わりに水平方向のコンテンツスライドがあります。JQuery UIは必要ありません。これは、この種の単純なものにはやり過ぎであり、学びたいからです。

目的1、JS：

$(function () {
$("div.tabs > div:gt(0)").hide();
$("div.tabs ul a:first").addClass('selected');

$('div.tabs ul a').click(function () {
$("div.tabs > div").fadeOut('normal', function () {
$("div.tabs > div").fadeIn('slow');
});
$('div.tabs ul a').removeClass('selected');
$(this).addClass('selected');
   return false;
});
});

HTML：

<div class="tabs">
    <ul>
        <li><a href="#first">First</a></li>
        <li><a href="#second">Second</a></li>
        <li><a href="#third">Third</a></li>
    </ul>
    <div id="first">
        <h2>First content</h2>
    </div>
    <div id="second">
        <h2>Second content</h2>
    </div>
    <div id="third">
        <h2>Third content</h2>
    </div>
</div>

$("div.tabs > div")infadeOutとinの行ですべてのdivを突く代わりに、アクティブなdivを見つける方法はfadeIn？

Aim2：
読んだslideUpのslideDownですが、それは垂直です。おそらく使用する必要がありますanimate()か？
どのように？それが垂直スライドで私にとって良いよりも複雑すぎる場合...

4

2 に答える 2

1

目的1：現在のコンテンツdivにアクティブなクラスを追加するだけです。変更されたコードについては、デモを参照してください。

目的2：jQuery UIを使用せずに実行するには、いくつかの手法があります。これは、何を達成したいのか、どこで使用したいのかによって異なります。いくつかのスライド効果については、変更されたデモを参照してください。

于 2012-05-29T13:03:20.607 に答える
0

aim1のために簡略化されたPaulの答え：追加のクラスなしで"div" + $(this).attr('href')、フェードアウトに最適化されたソリューションは次のdiv:visibleとおりです。

$(function () {
 $("div.tabs > div:gt(0)").hide();
 $("div.tabs ul a:first").addClass('selected');

 $('div.tabs ul a').click(function () {
  var newDiv = "div" + $(this).attr('href');
  $("div.tabs > div:visible").fadeOut('normal', function () {
   $(newDiv).fadeIn('slow');
  });
  $('div.tabs ul a').removeClass('selected');
  $(this).addClass('selected');
  return false;
 });
});

ポールに感謝します。

于 2012-05-29T14:21:16.170 に答える