ぬえさぶろうのAnimate放送部

解説

コンテンツのつくりかた

• 初期状態では、一番目のコンテンツを表示しておき、タブのクリックに合わせて対応するコンテンツを表示し、それ以外を非表示にします。
• 現在選択中のタブにcurrentクラスを付けています
• コンテンツ部分（記事の内容）#contentsのdiv要素にIDをつけて、タブのa要素href属性に指定しています。
• タブを切り替えるように見せるため、まずは1番目のコンテンツ意外を非表示にします。
• タブの選択時に処理を行うために、a要素にclick()メソッドを使用します。
• コンテンツの表示を切り替える
• 選択したタブのスタイルを変更する

HTML

/*HTML*/
/*タブ*/
<ul class="tab_list">
    <li><a href="#tab1" class="current">01</a></li>
    <li><a href="#tab2">02</a></li>
    <li><a href="#tab3">03</a></li>
    <li><a href="#tab4">04</a></li>
</ul>
<div id="contents">
    <div id="tab1">
        <p>ここには、tab1の内容を入れる</p>
    <!--/#tab1--></div>
    <div id="tab2">
        <p>ここには、tab2の内容を入れる</p>
    <!--/#tab2--></div>
<!--/#contents--></div>

CSS

/*タブ*/
.tab_list{
    display:flex;
    flex-direction:row;
    margin:0 0.5em;
}
.tab_list li{
    width:10%;
    text-align:center;
    background:#E5DECA;
    border-right:1px solid #000;
}
.tab_list li a{
    margin:0;
    padding:0.2em 0 0 0;
    color:#562222;
}
.tab_list li a:hover{
    background:#FFF7E8;
    box-shadow:2px -2px 4px #562222;
}
.tab_list li .current{
    background:#FFF7E8;
    color:#DA313B;
    margin:0;
    padding:0.2em 0 0 0;
}
.tab_list li .current:hover{
    text-shadow:1px 1px 2px #470000;
}
#contents{
    background:#FFF7E8;
    margin:0 0.5em;
    padding:0.5em;
}
#contents div{
    background:#fff;
    margin:0 0.1em;
    padding:0.5em;
}
.tab_title{
    backgroud:#fff;
    font-size:4.0rem;
    color:#470000;
    margin:0;
    padding:0;
}

JS

// タブ
$(function(){
    /*#tab1以外を非表示にする*/
    $('#contents div[id != "tab1"]').hide();
    
    /*タブをクリック*/
    $(".tab_list a").click(function(){
        //一度全てのコンテンツを非表示にする
        $("#contents div").hide();
        $($(this).attr("href")).show(); //タブの切り替え
        
        //現在のcurrentクラスを削除
        $(".current").removeClass("current");
        //選択されたタブにcurrentクラスを追加
        $(this).addClass("current");
        
        return false; //クリックを無効
    });
});