jQuery見本市(1)jQueryでタブを切り替える

0

    今日から、ホームページのリニューアルに使えるjQuery情報を紹介していきたいと思います。

    今回は、jQueryをつかったタブの切り替え。これは実はプラグインは使いません。生のjQueryで数行コードを書けば実現出来てしまうんです。

    まずは、実例を見ていただきましょう。実はこの企画のためにサンプルを掲載するサイトを1つ作りました。こちら、jQuery見本市|jQueryでタブを切り替えるをご覧ください。上部のタブをクリックするとコンテンツがぱっと切り替わって表示されます。今回はこれを作っていきます。

    ■jQueryをインストールする

    最初にjQueryを使う準備です。jQuery本体をインストールします。やり方は2つあって、1つは配布サイトからjQueryのコードをダウンロードし、それを自分のサイトにアップロードしてHTMLから指定する方法、もう一つはネットワーク上にホストされているjQueryをURLで指定して使用する方法です。今回はまず前者のダウンロードでやってみることにします。

    ダウンロードサイトはこちらjQueryサイトのダウンロードページです。

    jQueryDownload

    jQueryには1.x系列と2.x系列があります。機能はどちらも同じですが、2.x系列はIE8以前の古いブラウザをサポートしていません。今回は1.x系列を使うことにします。一番上の「Download the compressed production jQuery 1.11.1」をダウンロードしてください。compressedでは見た目を良くするための改行やスペース等が省かれてぎゅっと圧縮された状態になっています。ダウンロードしたファイルは、使用したいサーバにアップロードしておいてください。私はルートフォルダに「js」というフォルダをつくって、そこに入れておきました。

    アップロードしたら、次にそのファイルを指定するコードをhtmlのヘッダに記述します。

    <script src="js/jquery-1.11.0.min.js"></script>

    使いたいHTMLファイルのありかからの相対パスでファイルを指定してください。私は先程jsというフォルダにアップロードしたので、js/・・・となっています。以上で準備完了です。

    ■jQueryのコードを記述する

    jQueryの文法の基本は次の形式です。

    jQuery(処理対象).コマンド(処理内容);

    この最初の「jQuery」の文字はなんと「$」の1文字に置き換え可能ですので、以降は$で行きたいと思います。これを使って最初にやることは時間指定です。処理内容に書いたコマンドをいつ実行するかを指示してやります。難しいことはありません、HTMLのDOM要素を全て読み込んだ時点(画像ファイル等は読み込む前の段階)で実行する、というコマンド「ready」がありますのでこれを使います。

    $(document).ready(function(){処理内容});

    いきなり出てきた「function(){}」は、{}に書かれたjQueryコードを実行する、という意味になります。単に処理対象に対して「色を変えろ」とか「消せ」とかのコマンドを実行するのではなく、更に処理対象を細かく指定して指示を与えたいときはこのfunction()を使います。

    さてここで、なんとここに出てきたの「(document).ready」は省略可能なのです。jQueryまたは$の後にコマンド無しで()を書くとそれはreadyコマンドを指定したのと同じ意味になります。とすると、こうなります。

    $(function(){処理内容});

    これがjQueryの基本構文で、この{処理内容}の部分に先程の「$(処理対象).コマンド(処理内容)」の形式で処理を書いてゆくことになります。

    続いて、今回のjQueryコードを書いてみます。こちらです。

    
    $(function(){     $("a.tab").click(function () {
        <!-- class="tab"のaタグがクリックされたとき -->
    
            $(".active").removeClass("active");
            <!-- class="active"からacticveを削除する -->
    
            $(this).addClass("active");
            <!-- クリックされたaタグにclass="active"を付与 -->
    
            $(".content").hide();
            <!-- コンテンツを一旦非表示 -->
    
            var content_show = $(this).attr("title");
            $("#"+content_show).show();
            <!-- クリックされたaタグのtitle属性と同じid要素のみを再表示 -->
        }); 
    }); 
    

    先程の$(function(){処理内容})の中に

    $(“a.tab”).click(function(){処理内容});

    という文が書かれています。これは、”a.tab”つまり”tab”というクラスがつけられた<a>タグがクリックされたときに処理内容を実行せよ、という指令になります。”a.tab”の指定の仕方はcssでの指定の仕方と同じになっているので、cssを読んだことがあればなじみのある書き方だと思います。

    そして、クリックしたときの処理内容は、コメントを除くと全部で5行のコードになっています。

    最初の2行はタブの色を変える指令です。後で出てきますが、cssの方で、タブの色は全般グレーで、"active"というクラスが着いたタブだけ白くする、という指示が書いてあります。なのでjQueryではタブがクリックされたときにactiveというクラスを付け替えるだけでタブの色を変えることができるのです。このcssとの合わせ技はこれからよく使ってゆくことになると思いますので覚えておいてください。細かく読んでいきましょう。

    $(".active").removeClass("active");

    こちらは処理対象が".active"つまりactiveというクラス全般です。それにたいしremoveClassで一旦activeというクラス指示を全て取り除いています。取り除くのはクラスに指示されたactiveの文字だけです。これで一旦全てのタブがグレーになります。

    $(this).addClass("active");

    そしてこちらの処理対象は「this」。これはここでは現在クリックした<a>タグという意味になります。そこにクラス”active”を追加します。これでクリックしたタブが白くなるわけです。

    次はコンテンツの表示切換えです。まず次の1文で”contents”というクラスのついたタグの中身を一旦全て非表示にします。

    $(".content").hide();

    そして、ポイントは次の1行です。

    var content_show = $(this).attr("title");

    最初のvarは、次の「content_show」は変数ですよ、という宣言です。変数を1つ作ったわけです。ここで変数に入れている値ですが、thisは先ほどと同じクリックした<a>タグです。attrというコマンドは「属性値を取ってきなさい」というコマンドです。言葉で書くと、「クリックした<a>タグのtitle属性値を取ってきてcontent_showという変数に入れなさい」という意味になります。実はこれも後で出てきますが、タブの中身の各コンテンツのidと対応するタブのtitleを同じにして対応を取っています。つまりクリックした<a>タグのtitle属性を見ることで、表示したいコンテンツのidが判る仕組みにしてあるのです。

    ということで、最後の1行です。

    $("#"+content_show).show();

    cssの文法では#はidの意味でした。先程タブの中身は一旦全て非表示にしてありましたが、この一文で、<a>タグのtitleと同じidのブロックはめでたく再表示されることになります。

    ■HTMLコードを記述する

    次は、jQueryに対応させてHTMLコードを記述します。

    // タブ部 
    <div class="tabbed_area"> 
      <ul class="tabs"> 
        <li><a href="#" title="content_1" class="tab active">jQuery</a></li> 
        // 最初に開いておくタブにclass="active"を付与しておきます。
        <li><a href="#" title="content_2" class="tab">HTML</a></li> 
        <li><a href="#" title="content_3" class="tab">CSS</a></li> 
    </ul>
    
    // コンテンツ部 
    <div id="content_1" class="content"> 
        コンテンツ1 
    </div>
    <div id="content_2" class="content"> 
        コンテンツ2 
    </div>
    <div id="content_2" class="content"> 
        コンテンツ3 
    </div> 
    

    大きく2つのブロック、タブ部とコンテンツ部に分かれます。

    タブ部のポイントは、4つ、

    • 各コンテンツへのリンクを<a>タグで書く(href=”#”)
    • class=”tab”を与える
    • 区別するidをtitleに書くこと
    • 最初に表示しておくタブにclass=”active”を付けること。

    あとは<ul><li>で書いてもいいし、何で書いても構いません。

    コンテンツ部はもっと簡単

    • class=”content”を与える
    • 先程<a>タグのタイトルに着けた名前と同じものをidにする

    タブ部の<a>タグのtitleとコンテンツ部のidを同じにしてやるところがミソです。

    ■CSSを記述する

    あとはCSSで見た目を整えたら終了です。

    
    // 大外の枠と背景
    .tabbed_area {
    width:640px;
    border:1px solid #111;
    background-color:#ccc;
    padding:8px;
    }
    // タブセットのエリア
    ul.tabs {
    margin:0px; padding:0px;
    margin-top:5px;
    margin-bottom:6px;
    }
    // 個々のタブを横に配置
    ul.tabs li {
    list-style:none;
    display:inline;
    }
    // 個々のタブの設定。色は非アクティブの場合
    ul.tabs li a {
    background-color:#666;
    color:#fff;
    padding:8px 14px 8px 14px;
    text-decoration:none;
    border:1px solid #222;
    border-bottom: 0px
    }
    // タブにマウスを乗せた時の色の変化
    ul.tabs li a:hover {
    background-color:#222;
    border-color:#222;
    }
    // アクティブなタブの色
    ul.tabs li a.active {
    background-color:#fff;
    color:#222;
    border:1px solid #222;
    border-bottom: 1px solid #fff;
    }
    // コンテンツ枠の体裁
    .content {
    background-color:#fff;
    padding:10px;
    border:1px solid #444;
    }
    // 最初に非表示とするコンテンツの指定
    #content_2, #content_3 { display:none; }
    

    ポイントは最後の非表示コンテンツの指定です。先程HTMLで、最初に”active”にするタブを指定しましたが、ここでは非表示にする方のコンテンツを指定してdisplay:noneを与えています。

    ■まとめ

    以上で全てです。jQuery自体は簡単でも、HTML、CSSまで含めるとそれなりのボリュームになりましたので、最初はこのページのコードをコピペして作ってみてください。上手く動いたときの感動は格別です☆

    次回からはお気に入りのjQuery「プラグイン」を紹介していきたいと思います。


    コメント
    コメントする








       

    calendar

    S M T W T F S
      12345
    6789101112
    13141516171819
    20212223242526
    2728293031  
    << January 2019 >>

    アクセスカウンタ

    合計:
    今日:
    昨日:

    selected entries

    categories

    archives

    recent comment

    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      小田きく江
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      てちくん
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      suraugi
    • いそべぇのペーパークラフトを作る(初級編)(12)
      てちくん
    • いそべぇのペーパークラフトを作る(初級編)(12)
      だべえ
    • noomでマイナス12kgのダイエットに成功!
      Yoko

    recommend

    recommend

    recommend

    ドール デザートメーカー ヨナナス901
    ドール デザートメーカー ヨナナス901 (JUGEMレビュー »)

    結構高いんです、でも欲しいんです!

    links

    profile

    書いた記事数:173
    最近の更新日:2017/01/30

    search this site.

    others

    mobile

    qrcode

    powered

    無料ブログ作成サービス JUGEM

    Google Adsense

    楽天ブックス

    楽天