freefuntimes今回は、jQueryを使用して中身がふわっと表示されるタブ切り替えを実装してみることにした。前回のページと挙動はほとんど同じである。アプローチが異なるので紹介していきたいと思う。下記にデモは作ったのでご覧いただければと思う。demoでは実装に入っていきたいと思う。src="style.js"></script></body></html>htmlのソースは下記の記事と同じだ。}}こちらは前回の記事では、opacityやpositionなどを使って表示非表示の対応をとっていたが、今回はjQueryでfadeを使って制御する関係で下記のソースに変更している。block;で中身が表示されるようにしている。});});前回と少し似ているが、aリンクはページが遷移しないようにpreventDefaultを設定している。a)に対してremoveClassを設定することによりactiveのクラスが外れるように設定する。div)に対してremoveClassを設定することによりactiveのクラスが外れるよう設定する。その後、クリックしたタブ(this)にactiveのクラスが付与される。a」を指しているわけではないため注意したいところだ。続いて、クリックされたタブと同じ順番のタブコンテンツに対してactiveのクラスを付与したいのだが、変数をおいてあげる必要がある。変数の名前はarrayとしているが、任意の名前で大丈夫だ。a’).index(this)を入れている。indexは引数で指定されたエレメントのインデックス番号を返し、html上の1番目、2番目を、jQueryでは0番目(html上の1番目)、1番目(html上の1番目)と数えていく。これでタブをクリックした時に、何番目がクリックされているのかがarrayの変数で取得できるようになる。この変数arrayを利用して、タブコンテンツに対して、fadeInでふわっと表示されるようactiveのクラスをつけていく。div').eq(array).fadeIn(300).addClass('active');eqについてeqというのは、htmlの要素の集合から、指定したポジションの要素だけを取り出す。html要素の中にliタグが4つあるとした場合、3番目を取り出したいときなどにeq(2)と指定することで3番目の要素を取り出すことができる。eqを2と指定したのは、javascriptでは配列の数え方が0から始まるからである。ここで上記のeq(array)について考えていくと、これは何番目のタブをクリックしているのかを取り出している事になる。クリックする度にその取得される番号は変わっていくようになっている。fadeInについてfadeInは、jQuey上でhtml要素をふわっと表示させたいような時に使用する。none;」が設定されてるかだ。none;」を設定している。要素が実行されて別のタブをクリックした時でも、以前にクリックしていたところが実行されたままの状態になってしまうため、その状態を解除しなくてはならない。この対応については後述したいと思う。fadeIn()の括弧の中には、数字を入れると秒数の指定、slow、normal、fastを入れたりして表示速度をコントロールすることができる。今回はfadeIn(300)と指定して、0.3秒でタブコンテンツが表示されるようにした。div').not('.active').hide();続いて、activeのクラスが付与されていないタブコンテンツが表示されないように設定する指定だ。block;で残った状態になっている。これを非表示にするために、activeがついていないクラスに対してhide()を使用して非表示にしていく。none;が付与される。以上で終わりだが、fadeInやhide以外にもfadeOutやshowなど色々なメソッドがあるので調べてカスタマイズしてみると面白いかもしれない。スムーススクロールの記述は組み合わせて使うことが多いので、前回同様残している。解説は省略したいと思う。次回もタブ切り替えシリーズの別パターン実装をやっていきたいと思う。[...]コメントはクローズされています。(2)人気ブログランキングこのサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。