スポンサードリンク

Bootstrapを使ってWebページにタブUIを実装しよう

Bootstrap top

Bootstrapを導入する目的の一つに、「タブUIが簡単に実装できそう」というのがありまして、いそいそとサンプルコードをコピペしてみたのですが・・・。

たしかにタブのUIは表示されましたが、タブの切り替えからして全く動かないじゃん!

いや、一応は選択可能なタブにマウスポインタが当たると背景色が変わるところは動くのですが、それだけでは使えませんからねぇ。

というわけで、とりあえずタブの切り替えができるところまで実装してみました。

ソースコードは以下のとおりです。CDNを利用しているので、HTMLファイルに貼り付けるだけで動きます。

サンプルコードからの変更点は、JavaScritの関数(SelectTab)の作成,ULタグへのID属性の追加,LIタグへのonClick属性の追加 となっています。タブになるLIタグを追加するだけならJavaScriptを変更しなくても動きます。

なお、動作確認は Windows 7 Home Premium SP1 上の Chrome v49.0.2623.108 にて行っています。

参照リンク
 ・Components · Bootstrap(タブUIのサンプル)
 ・Getting started · Bootstrap(CDNのサンプル)
 ・Bootstrap · The world's most popular mobile-first and responsive front-end framework.

【関連エントリー】
 ・Bootstrapを導入してみよう
 ・Bootstrapを使ってWebページにタブUIを実装しよう (2日目)(表示の切り替え実装)

スポンサードリンク
コメント
Verify your Comment
Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

コメントを投稿

プロフィール


  • 書いてる人:夢界 陸

    名古屋在住のおっさん。
    プログラミングやガジェットの話など、 日々の興味を徒然と綴っています。



    Twitterやってます @mukairiku



    運営サイト
    www.mukairiku.net

アクセスランキング


ブログ内検索

Licenses

  • Creative Commons License

OTHER


  • このブログのはてなブックマーク数

    ブログパーツ
Blog powered by TypePad

スポンサードリンク