タブ切り替えの実装方法

このスクリプトを利用するとタブ切り替えをウェブサイトに実装することができます。

javascript

スクリプトを正常に動作させるためにタブを含むhtmlファイルに以下のように記述します。

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/tabs.js"></script>

「tabs.js」ファイルにはスクリプトの機能を基本の値で初期化するため以下のような記述が含まれています。

$(document).ready(function(){
    //ページ読み込み時
    $(".tab_content").hide();//内容をすべて隠す
    $("ul.tab li:first").addClass("active").show();//はじめのタブをアクティブにする
    $(".tab_content").show();//はじめのタブの内容を表示
    //クリックイベント
    $("ul.tab li").click(function(){
        $("ul.tab li").removeClass("active");//activeクラスをすべて取り除く
        $(this).addClass("active");//選択されたタブにactiveクラスをつける
        $(".tab_content").hide();//すべてのタブの内容を隠す
        var
activeTab = $(this).find("a").attr("href");
        $(activeTab).fadeIn();//アクティブなIDの内容をフェードで表示する
        return false;
    });
});

スクリプトにはコメントがついているので、機能をカスタマイズする際も、どの属性を変更すればよいかわかります。

html

以下にhtmlの記述例を示します。

<ul class="tabs">
  <li><a href="#tab1">ギャラリー</a></li>
  <li><a href="#tab2">送信</a></li>
</ul>

<div class="tab_ocntainer">
  <div id="tab1" class="tab_content">
    <!--内容-->
  </div>
  <div id="tab2" class="tab_content">
    <!--内容-->
  </div>
</div>

タブは「tab」クラスのついたリスト(<ul>タグ)で表されます。それぞれのリスト項目(<li>タグ)には「tab1」「tab2」のIDの付いたリンクが入ります。これに応じてその下に「tab1」「tab2」のIDの付いた<div>タグがあります。

css

メインとなる「style.css」にはスクリプトに関連したスタイルが記述されています。以下のスタイルを編集します。

ul.tabs{
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px;/*タブの高さ*/
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    width: 100%;
}
ul.tabs li{
    float: left;
    margin: 0;
    padding: 0;
    height: 31px;/*ulの高さから1px引く*/
    line-height: 31px;/*タブ内のテキストの垂直方向位置*/
    border: 1px solid #999;
    border-left: none;
    margin-bottom: -1px;/*リスト項目を1px引き下げる*/
    overflow: hidden;
    position: relative;
    background: #e0e0e0;
}
ul.tabs li a{
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    border: 1px solid #fff;/*リスト項目の内側に1pxの白の枠線をつけてべベル効果*/
    outline: none;
}
ul.tabs li a:hover{
    background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover{
    background: #fff;
    border-bottom: 1px solid #fff;/*アクティブのタブが内容とつながっているように見せる*/
}

Comments are closed.