タブを作成して、空間を最大限に使う

今回はパネルを使って、複数のコンテンツを１つのエリアに配置して、ブラウザ上部に設けたタブをクリックすることによって表示する
コンテンツを切り替えるものを作成します。詳細はサンプルコード上にコメントアウトしました。
サンプルコードの実行結果はこちら

*{margin:0;padding:0;}
html { font-family: "Ropa Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; font-size: 16px; line-height: 1.5; }

ul li{list-style-type:none;}
.clearfix:after{clear:both;}

.secWork{
    width:960px;
    margin:0 auto;}

.secWork h2{
    /* 「Welcome!」の文字の箇所の設定 */
    float:left;
    font-size:30px;}

header.secHeader{
    height:64px;
    line-height:64px;}

    /* Worfの箇所のタブの箇所の設定です。*/

    .secWork .workTabs li{
        float:left;
        position:relative;
        border-right:1px solid #b8b8b8;
        box-shadow:4px 0 white;}

    .workTabs a{
        position:relative;
        padding:0 1.1em;
        display:block;}

        /* マウスをのせたタブと
        選択中のタブのスタイルに適用する */
        .workTabs a:hover,
        .workTabs a.active{
            background-color:#303030;
            color:white;}

        /* 
        選択中のタブの下に「▼」を表示するための
        スタイルに適用する 
        */
        .workTabs a.active:after{
            position:absolute;
            top:100%;
            left:50%;
            width:37px;
            height:19px;
            margin-left:-18px;
            content:"";
            background:url(img/sprites.png) no-repeat 0 0;}

    /*  パネルの設定 */
    .secWork .secBody{
        height:480px;
        position:relative;}

*{margin:0;padding:0;}

html { font-family: "Ropa Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; font-size: 16px; line-height: 1.5; }

ul li{list-style-type:none;}

.clearfix:after{clear:both;}

.secWork{

width:960px;

margin:0 auto;}

.secWork h2{

/* 「Welcome!」の文字の箇所の設定 */

float:left;

font-size:30px;}

header.secHeader{

height:64px;

line-height:64px;}

/* Worfの箇所のタブの箇所の設定です。*/

.secWork .workTabs li{

float:left;

position:relative;

border-right:1px solid #b8b8b8;

box-shadow:4px 0 white;}

.workTabs a{

position:relative;

padding:0 1.1em;

display:block;}

/* マウスをのせたタブと

選択中のタブのスタイルに適用する */

.workTabs a:hover,

.workTabs a.active{

background-color:#303030;

color:white;}

選択中のタブの下に「▼」を表示するための

スタイルに適用する

.workTabs a.active:after{

position:absolute;

top:100%;

left:50%;

width:37px;

height:19px;

margin-left:-18px;

content:"";

background:url(img/sprites.png) no-repeat 0 0;}

/* パネルの設定 */

.secWork .secBody{

height:480px;

position:relative;}

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>複数タブを駆使して、空間を有効利用してみる。</title>
   
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/ui/jquery-ui.js"></script>

    <link rel="stylesheet" href="style.css">
    <script src="js/manyTabs.js"></script>

</head>
<body>
<section class="secWork" id="work">
    <header class="secHeader clearfix">
        <div class="inner">
            <h2>Welcome!</h2>
            <ul class="workTabs">
                <!--
                パネルを切り替えるために用意するタブ
                -->
                <li><a href="#work01">WORK 1</a></li>
                <li><a href="#work02">WORK 2</a></li>
                <li><a href="#work03">WORK 3</a></li>
                <li><a href="#work04">WORK 4</a></li>
                <li><a href="#work05">WORK 5</a></li>
            </ul>
        </div>
    </header>
    <div class="secBody">
        <!--
        このsecBodyで囲った範囲に各タブの内容を設定します。
        -->
        <section class="tabPanel" id="work01">
            <p>サンプルテキスト１
            ここに画像や文字をいれてください</p>
        </section>
        <section class="tabPanel" id="work02">
            <p>サンプルテキスト２
            ここに画像や文字をいれてください</p>
        </section>
        <section class="tabPanel" id="work03">
            <p>サンプルテキスト３
            ここに画像や文字をいれてください</p>
        </section>
        <section class="tabPanel" id="work04">
            <p>サンプルテキスト４
            ここに画像や文字をいれてください</p>
        </section>
        <section class="tabPanel" id="work05">
            <p>サンプルテキスト５
            ここに画像や文字をいれてください</p>
        </section>
    </div>
</section>

</body>
</html>

<!doctype html>

<html>

<head>

<title>複数タブを駆使して、空間を有効利用してみる。</title>

</head>

<body>

<h2>Welcome!</h2>

<!--

パネルを切り替えるために用意するタブ

-->

</ul>

</div>

</header>

<!--

このsecBodyで囲った範囲に各タブの内容を設定します。

-->

<p>サンプルテキスト１

ここに画像や文字をいれてください</p>

</section>

<p>サンプルテキスト２

ここに画像や文字をいれてください</p>

</section>

<p>サンプルテキスト３

ここに画像や文字をいれてください</p>

</section>

<p>サンプルテキスト４

ここに画像や文字をいれてください</p>

</section>

<p>サンプルテキスト５

ここに画像や文字をいれてください</p>

</section>

</div>

</section>

</body>

</html>

$(function(){
    $("#work").each(function(){
        
        /*
            jQueryオブジェクトして扱う
        */
        var
        
        //タブのリスト
        $tabList = $(this).find(".workTabs"),
            
        //タブ上にあるリンク
        $tabAnchor = $tabList.find("a"),
            
        //パネル
        $tabPanel = $(this).find(".tabPanel");
        
        /*
        タブをクリックしたときの処理はココに書きます。
        
        「event」はイベントオブジェクトです。
        色々な情報が格納されています。
        今回は、「event」というものを書くという
        程度の理解で大丈夫です。
        */
        $tabList.on("click","a",function(event){
            
            /*
            リンクをクリックしたときに動作を取り消す = 
            ページ内リンクの動作を取り消します。
            */
            event.preventDefault();
            
            var $this = $(this);
            
            /*
                クリックされたパネルが既に
                class="active"になっている場合は
                ここの処理は何もしない関数を終了する。
                return;  と書くと関数が終了します。
            */
            if( $this.hasClass("active") ){ return;}
            
            /*
            全てのタブの選択状態を一回解除する。
            
            */
            $tabAnchor.removeClass("active");

            /*
                クリックされたタブは選択上にする。
            */
            $this.addClass("active");
            
            /*
                全てのパネルを非表示にして、
                クリックされたパネルを表する。
            */            
            $tabPanel.hide();
            
            /*
                クリックされたパネルの
                href属性の値「#work**」という
                文字列を使っている。
                
                $( クリックされたaタグのhrefの属性値 )を
                表示している。
                
            */
            $( $this.attr("href")).show();
        });
        
        $tabAnchor.eq(0).trigger("click");
    });
});

$(function(){

$("#work").each(function(){

jQueryオブジェクトして扱う

var

//タブのリスト

$tabList = $(this).find(".workTabs"),

//タブ上にあるリンク

$tabAnchor = $tabList.find("a"),

//パネル

$tabPanel = $(this).find(".tabPanel");

タブをクリックしたときの処理はココに書きます。

「event」はイベントオブジェクトです。

色々な情報が格納されています。

今回は、「event」というものを書くという

程度の理解で大丈夫です。

$tabList.on("click","a",function(event){

リンクをクリックしたときに動作を取り消す =

ページ内リンクの動作を取り消します。

event.preventDefault();

var $this = $(this);

クリックされたパネルが既に

class="active"になっている場合は

ここの処理は何もしない関数を終了する。

return; と書くと関数が終了します。

if( $this.hasClass("active") ){ return;}

全てのタブの選択状態を一回解除する。

$tabAnchor.removeClass("active");

クリックされたタブは選択上にする。

$this.addClass("active");

全てのパネルを非表示にして、

クリックされたパネルを表する。

$tabPanel.hide();

クリックされたパネルの

href属性の値「#work**」という

文字列を使っている。

$( クリックされたaタグのhrefの属性値 )を

表示している。

$( $this.attr("href")).show();

});

$tabAnchor.eq(0).trigger("click");

});