タブ切替え [jQuery] [js]

html

<div class="tab_wrap">
    <ul>
        <li class="open">タブ1</li>
        <li>タブ2</li>
        <li>タブ3</li>
    </ul>

    <div class="content_wrap">
        <div>内容1</div>
        <div>内容2</div>
        <div>内容3</div>
    </div>
</div>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

class名は任意です。使用するタグも構造もこれに限りません。
なんとなくタブになる部分（このサンプルではリスト部分）とそれに連動して表示/非表示を切り替えるコンテンツ部分（このサンプルではclass[content_wrap]内）を用意して、適当にセレクターになるclass名やid名をつけてください。

css

.tab_wrap > ul li{
    display: inline-block;
    cursor: pointer; /*PCの場合はクリックする部分とわかるようにマウスオーバー時のカーソルの形状がpointerなるようにする*/
    /*タブ部分の装飾*/
}
.tab_wrap > ul li:hover{
    /*PCの場合、タブにマウスオーバーしていることがわかりやすいような装飾*/
}
.tab_wrap > ul li.open{
    /*現在コンテンツを表示しているタブ部分の装飾*/
}
.tab_wrap .content_wrap{
    /*必要であればタブコンテンツの枠などの装飾*/
}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

cssは適宜設定してください。
PCの場合はどのタブを選択しようとしているかわかりやすいように、マウスオーバー時の装飾もしておくとよいでしょう。
また、PC、スマートデバイス、何れにしても現在どのタブのコンテンツを表示しているかわかりやすいように、装飾しておくと親切かと思います。

このサンプルの場合、タブ部分のテキストが長かったり、タブ数が多くなると、親タグの幅に合わせてタブが折り返してしまいます。
スマートデバイスなど必然的に親タグの幅が狭い場合など、非常に見づらいことになるでしょう。
参考例なので、ここではそこまでの対処をしていませんが、実際のタブ切替えコンテンツの場合はタブに表示する文字数やタブ数の増減を見越したデザインとCSS等の設定が必要になります。

js

$(function(){
    $('.content_wrap > div:not(:eq(0))').hide(); //読み込み時に表示しておくタブコンテンツ以外を非表示にしておく

    $('.tab_wrap li').on('click', function() {
        var num = $('.tab_wrap li').index(this); //クリックしたタブが何番目のタブかを変数に格納
        $('.content_wrap > div').hide(); //一度全てのタブコンテンツを非表示
        $('.content_wrap > div').eq(num).fadeToggle(); //クリックしたタブに連動するコンテンツをfadeToggleで表示
        $('.tab_wrap li').removeClass('open'); //一度全てのタブのclass[open]を削除
        $(this).addClass('open'); //クリックしたタブにclass[open]を追加
    });
});

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

説明はコメントアウト通りです。
なお、この方法だと、同一ページ内に複数タブ切替えがある場合、うまく動作しません。

fadeToggleの()内では、開閉のスピードを設定したり、コールバック関数を追加できたりします。
タブコンテンツが表示された（非表示になった）直後に何らかの処理を加えたい場合などにはコールバック関数で処理を追加してみてください。

html

<div id="t1" class="tab_wrap">
    <ul>
        <li class="open">タブ1</li>
        <li>タブ2</li>
        <li>タブ3</li>
    </ul>

    <div class="content_wrap">
        <div>内容1</div>
        <div>内容2</div>
        <div>内容3</div>
    </div>
</div>

<div id="t2" class="tab_wrap">
    <!--省略（上記と同じ）-->
</div>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

複数設置できないパターンとhtmlは同じですが、それぞれのタブグループに任意のid名をつけてください。
cssも特に変更ありません。必要な装飾があれば（タブの色を変えるなど）、適宜設定してください。

js

$(function(){
    $('.content_wrap').each(function(){
        $(this).children('div:not(:eq(0))').hide();
    });

    $('.tab_wrap li').on('click', function() {
        var p = '#' + $(this).parents('div').attr('id') + ' ';//親タグのidを取得
        var num = $(p + 'li').index(this);
        $(p + '.content_wrap > div').hide();
        $(p + '.content_wrap > div').eq(num).fadeToggle();
        $(p + '.content_wrap > div').eq(num).find('div').show();
        $(p + 'li').removeClass('open');
        $(this).addClass('open');
    });
});

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

複数設置できないパターンとやっていることはほぼ同じです。
全てのタブ切り替えに対して、読み込み時に表示しておくタブコンテンツ以外を非表示にしておく処理を2〜4行目で行っていることと、クリックしたタブの親要素（タブ切替えのひとまとまり）のidを取得して、そのidの範囲内においてタブ切替えの動作をさせています。

html

htmlはテキスト部分に画像を入れただけで変更はありません。
このサンプルでは装飾的なcssは上のサンプルをほぼ変更せずに使っていますが、サムネイルの位置を変えるなどした方がよりスライドショーっぽい仕上がりになると思います。
jsの変更はありませんが、さらに自動送りの機能を入れてみるなど、いろいろ追加すればそれっぽいスライドショーにすることができるので、挑戦してみてください。

css

画面幅が狭いスマートデバイスではタブが折り返してしまうので、ここではタブ部分を横スクロール可能にし、スワイプで左右に流せるようにしてみます。

.tab_wrap > ul li{
    display: inline-block;
    width: 60px; /*サムネイル（タブ）の幅を適宜設定*/
    padding: 4px;
}
@media screen and (max-width: 1047px){ /*スマートデバイス向けに設定追加・変更*/
    .tab_wrap > ul {
        overflow: scroll;
        white-space:nowrap;
    }
    .tab_wrap > ul li{width: 68px;} /*サムネイル（タブ）の幅を適宜変更*/
}
.tab_wrap img{width: 100%;}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

タブレットの場合も鑑みて、@media screenで1048px前後で切り分けて、タブ部分をスクロール可能にしています。
なので、PCでもブラウザの幅を狭めるとスクロールバーが表示され、スクロールバーで水平移動ができます。
ただし、PCの場合はスクロールバーのせいで見栄えが悪くなると思うので、どのあたりで切り分ける数値は適宜変更してください。あるいはjsなどを使ってデバイスを判断させる方が無難かもしれません。

横スクロールがの発生は、見栄えだけでなく操作性にも影響してきます（とくにPC）。
また、スマートデバイスの場合、何も操作しない状態だとスクロールバーが表示されないので（OSとブラウザおよびそれらのバージョンによって異なるかも）、タブが横に移動することに気づいてもらえない場合もあります。
見栄えもさることながら使い勝手も考慮した上で、導入しましょう。

html

htmlは、タブ部分のliタグで１番目のタグに入れているclass[open]を削除して、読み込み時に表示したいタブコンテンツに対応するliタグにclass[open]を追加してください。
cssは特に変更ありません。

js

$(function(){
    //同一ページ内に複数タブ切替え設置に対応していない場合
    $('.content_wrap > div:not(:eq(6))').hide(); //例えば7番目のタブを開いておきたい場合（eqは0から数える）

    // 以下省略


    // ================================================================================================================= //


    //同一ページ内に複数タブ切替え設置に対応してる場合
    $('.content_wrap').each(function(){
        $(this).children('div:not(:eq(0))').hide();
    });

    $('#tabid .content_wrap').children('div').show(); //目的のタブ切替えのidを指定して、一旦全部表示
    $('#tabid .content_wrap').children('div:not(:eq(6))').hide(); //目的のタブ切替えの表示したいタブコンテンツ以外非表示

    // 以下省略

    //スマートデバイスの場合、最初に表示したいタブの位置によっては画面内に表示されないので調整
    var n = $('#tabid .open');
    $('#tabid ul').scrollLeft(n.offset().left - n.outerWidth()/2);
});

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

同一ページ内に複数タブ切替え設置に対応していない場合は、読み込み時に表示しておくタブコンテンツ以外を非表示にしておく記述のeq(0)だった部分を適宜表示したいタブの番号に変更してください（eqは0から数えます）。

同一ページ内に複数タブ切替え設置に対応している場合は、すべてのタブ切替えで同じ位置のタブを開いておくならば、each内のeq(0)の数値を変えれば良いですが、一つのタブグループのみとか、それぞれ違うという場合は、タブグループに指定したIDごとに表示しておくタブとタブコンテンツを設定します。

ここではjsコードの数値を手入力で変更しましたが、例えば、class[open]が最初に設定されているliタグが（どのタブグループの）何番目かをjsで調べて、その数値をeqに与えるなど、いちいちjsコードを変更しなくても良いようにしておくと、管理が煩雑にならなくて良いかもしれません。

スマートデバイスは幅が狭いので、タブ部分を横スクロールにできるようにしましたが、そうすると最初に表示するタブの位置によっては、画面内にタブが表示されません。
そこでここではclass[opne]が指定されているタブに合わせてulの位置を移動させることで、画面内に表示するようにしています。なお、わざとタブグループの左端にタブを合わせないで位置をずらすことで水平移動が可能であることをを示唆しています。

html

<div class="tab_wrap">
    <div class="content_wrap">
        <div><img src="画像ファイルのパス" alt="画像の説明"></div>
        <div><img src="画像ファイルのパス" alt="画像の説明"></div>
        <div><img src="画像ファイルのパス" alt="画像の説明"></div>
        <div><img src="画像ファイルのパス" alt="画像の説明"></div>
        <div><img src="画像ファイルのパス" alt="画像の説明"></div>
    </div>
    <ul>
        <li class="open"></li><!--
        --><li></li><!--
        --><li></li><!--
        --><li></li><!--
        --><li></li>
    </ul>
</div>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

htmlはここまでのタブ切替えとほとんど同じです。タブ（サムネイル）にあたる部分の記述位置が変わっていますが、これはデザインや操作性によって変更してください（htmlでの記述位置を変えずにCSSで位置を変更しても良いです）。
必要であれば（同一ページに複数のタブ切替えを設置するときなど）、class[tab_wrap]のタグにidを設定してください。

ここで重要なのはタブ（サムネイル）にあたる部分のリストにおいて、隣接するliタグの改行やスペースを排除して記述することです。ここではコメントアウトで対処しています。

なお、上の簡易スライドショーではタブ（サムネイル）にあたるリストにimgタグで画像を入れていましたが、ここでは背景としてサムネイルを入れるので、liタグの中身は空になっています。
なぜ、このようにしたかというと、現実の業務ではサムネイル画像が縦長であったり横長であったり、横向きで揃えられていてもサイズがバラバラだったりすることがあるからです。、大きな画像だけが用意されて、サムネイル画像はないということもあります。
サムネイル画像を並べるにあたって、サイズを統一した方が見栄えが良いですが、大量の画像をさばくのにいちいちphotoshopでサイス変更などしていられません。
そこで、背景にしてしまうことで、サイズをcssでコントロールします（もちろん、imgタグで画像を差し込んでそれをcssでどうにかしてもよいです）。

css

.tab_wrap > ul li{
    box-sizing: border-box;
    border:solid 3px #fff;
    padding: 0;
    margin: 0;
    background-position: center center;
    background-size:cover;
}
.tab_wrap > ul li.open{border:solid 3px #f93;}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

cssは普通のタブ切り替えとさほど変更はありません。
ここでは、タブ（サムネイル）にあたるリストタグに、サムネイルとして背景を設置したときの設定をしておきます。
また、どのサムネイルが選択されているか分かりやすいように、class[open]時にボーダーに色をつけます。

選択されていないサムネイルにあらかじめ（地の色に合わせて）白のボーダーを設定しているのは、そうしないとclass[open]時にボーダーが表示されたときに若干画像が小さくなってしまうためです。上下左右3px程度だとあまり気づかないかもしれないので、あらかじめボーダーを入れるかどうかはお好みでどうぞ。
むろん、選択されているサムネイルがどれかわかるようする表現はボーダーに限りません。opacityで透明度を調節してもいいと思います。

スマートフォンでは気にならないが、タブレットだと画像が大きすぎるという場合は、class[tab_wrap]の最大幅を設定するなど、工夫してみてください。

js

$(function(){
    // 背景（サムネイル）の設定・・・画像のファイル名が連番で用意されている場合
    var bgNum = 0;
    $('.tab_wrap > ul li').each(function(i){
        $(this).css('background-image','url(画像のファイルパス＋共通ファイル名' + i + '.png)'); //ファイルの拡張子は適宜変えてください
    });

    //サムネイル調整
    var timer = false;
    var numP = $('.tab_wrap > ul li').length; //写真の枚数（最大枚数）
    var ww = $(window).width(); //ウィンドウ幅
    var rw; //リサイズ後のウィンドウ幅

    getSize(); //最初の読み込み時にウィンドウやサムネイル全体の幅を把握して、サムネイルの画像サイズを設定

    $(window).on('resize', function(){ //スマートデバイスの向きが変わった時（縦横回転によって画面の横幅が変わったことを検知した時）getSize関数でサムネイルのサイズを変更する
        if (timer !== false) { //リサイズ中に何度も処理が行われるのを防ぐ
            clearTimeout(timer);
        }

        timer = setTimeout(function() {
            rw = $(window).width(); //リサイズ後のウィンドウ幅を取得
            if ( ww != rw ) {
                getSize();
                ww = $(window).width();
            }
        }, 20);
    });

    function getSize(){
        $('.tab_wrap > ul li').css({opacity:0});

        var w = $('.tab_wrap > ul').innerWidth(); //サムネイル全体の幅を取得
        var size = Math.floor(w/numP); //サムネイル全体の幅を最大枚数で除算してサムネイル1枚あたりの幅（＝高さ）を求める
        $('.tab_wrap > ul li').css({width: size + 'px', height: size + 'px'});
        $('.tab_wrap > ul li').animate({opacity:1},'fast');
    }
});

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

タブ切替え部分のjsコードには変更ありません。
なお、class[tab_wrap]にidがついているなら、セレクターに.tab_wrapがある部分にはそのidも指定してください。

1. 3〜6行目：タブ（サムネイル）にあたるリストタグに背景画像をセット
2. 9〜12行目：必要な変数に値をセットしています。
   変数numPは、ここではタブ（サムネイル）にあたるliタグの数をセットしていますが、例えばサムネイルの最大表示数は5でも読み込まれる画像は3とか最大表示数に満たない場合もあるというときは、枚数が少ない場合と最大表示数まである場合とでサムネイルのサイズに差が出てしまうので、素直に設定したい最大表示数を直接て入力してください。
3. 14行目：最初に読み込まれた状態で、サムネイルの画像をセットする関数getSizeを実行（関数getSizeについては後で記述）
4. 16〜28行目：スマートデバイスの向きが変わった時（縦横回転によって画面の横幅が変わったことを検知した時）の処理。
   22〜26行目でスマートデバイスの向きが変わった後の画面サイズを取得して、変わる前と比較してサイズが違っていたらサムネイルの画像をセットする関数getSizeを実行し、画面サイズを格納しておく変数wwの値を変更している。
   その他の記述はスマートデバイスの向きが変わっているときに何度も処理が行われるとうざいので、それを防ぐおまじない。
5. 30〜37行目：最初に読み込んだ時や、端末の向きが変わった時に、サムネイルのサイズを変更するための関数。
6. 31行目：読み込むデータ量が多い場合など、一瞬サイズ調整する前のサムネイルが見えてしまったりするので、一旦透明にしておく（display:noneでサムネイルの領域が全くない状態になるとサムネイルの領域全体の幅を取得できなくなるので注意）
7. 33行目：サムネイルの領域全体の幅を取得
8. 34行目：サムネイル全体の幅をサムネイルの最大表示数で（liタグにmarginとかつけた場合は、wからmargin合計分差し引いてから）除算して、サムネイル1枚あたりの幅を計算
9. 35行目：サムネイルの幅と高さを設定（ここではサムネイルの高さを幅と同じにしているが、高さを変えたい場合は適宜値計算するか固定値を設定する）
10. 36行目：サムネイルのopacityを1にして表示する。

3〜6行目のタブ（サムネイル）にあたるリストタグに背景画像をセット部分は、画像ファイルが同一フォルダ内に連番で提供されている場合に限ります。ファイル名に法則性がないと使えない方法です。
ちなみにphpでページを吐き出していて、htmlコーダーがいじれる場合は、同じ作業をphpでやってしまった方が楽かもしれません。

htmlコードでタブ（サムネイル）にあたるリストタグの隣接するliタグの改行やスペースを排除して記述する（コメントアウトで対処する）ことができなかった場合、単純に最大表示数でサムネイル全体の領域の幅を乗算しただけでは、表示が崩れてしまいます。
隣接するliタグに改行やスペースがあると、ブラウザに表示される時、どうしても隙間ができてしまうからです。しかもその隙間はOSやブラウザー及びそのバージョンの組み合わせによってサイズが異なります（その上その隙間をjsなどで取得できないっぽい）。そのため実機で確認しながら、最大表示数に0.5（数値はどの辺で妥協するかによる）加算してからliの幅を算出させるなど、なんらかの工夫が必要になってきます。

おまけのjs

上記のサンプルでは使っていないのですが、蛇足的に・・・
実際の業務ではコンテンツをjsonとかで読み込んでいて、phpでサムネイルのliを吐き出していたりすると思います。
で、最大表示数はnumP枚だけれど、実際に吐き出されているサムネイルのliの数はnumP枚より多かったり、少なかったりします（しかもタブグループは複数）。そういった時にjsで枚数を調整するコードをご紹介します。

$(function(){
    //上記の初期値を変数にセットする部分（3〜6行目）の後に追加
    var numP = 5;//最大表示枚数
    var photoN = $('.tab_wrap > ul').length; //phpで吐き出しているタブグループの数
    for(i=0; i< photoN; i++){
        thumbN = $('.tab_wrap > ul').eq(i).children('li').length;
        if(thumbN > numP) thumbN = numP;
        $('.tab_wrap > ul').eq(i).children('li').slice(thumbN).hide(); //numP枚目以降は非表示
    }
});

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

コンテンツをjsonとかで読み込んでいて、phpでhtmlを吐き出しているという場合、通常表示させる数をphp側でコントロールしますが、何らかの事情（例えばhtmlコーダーがphpをいじれない立場で、phpコーダーが表示させる数を調整する記述を忘れてしまったけど、本人が休みで公開まで時間がないとか）でhtml側で対処しないといけないときはjsなんかを駆使して何とかすることができるよーという例です。