Bootstrapのメモ part2
PHPをいじり始めて1年近いらしいので書こうかなと思って前回の続き書きます。
これの続きです。
2回目の今回は単一ページ内でタブ切り替えする方法の話をします。
実装してできる内容はこんな感じ
イメージとしてはこんな感じ(画像のやつは個人的に欲しいシステム実装しようと思ってフロントからやってるコードを開いて見た時の画像です。
コードはそんなに手の込んだコードにはならないです。
とりあえず前回のエントリにも書いたCSSとJsのライブラリを読み込みます。
あとはタブを切り替えて表示したいコンテンツを以下のような感じで記述するだけ
<div class="tab-content">
<div class="tab-pane fade in active">
<!--ここに切り替える内容を記述-->
</div>
<div class="tab-pane fade"><!--ここに切り替える内容を記述2-->
</div>
</div>
こんな感じです。
コードの簡単な解説をすると
<div class="tab-content"></div>
内に切り替えて表示したい内容をさらにクラスを分けて記述します。
<div class="tab-pane fade in active"></div>
この中に記述される内容がタブの中に含まれるコンテンツです。
class内のtab-paneはタブの内容であることを示すクラスの名称です。
fade inはタブを切り替えた時にフェードイン効果をつけることができます。
activeは最初に該当するページを開いた時に表示されるタブの内容であることを示します。
こういうのを活用すると一度に表示したくないけど同一ページ内で扱いたい情報とかの取り扱いがグッと便利になるのでこういう機能は活用していきたいです。
---参考----
前回と同じ
