IT女子のお気に入りフォルダ

管理人の備忘録と実践を兼ねた(出来るだけ)役に立つ情報を配信するブログです。

Twitter Bootstrapでタブを使う


話題のTwitter Bootstrap。このブログもTwitter Bootstrapを使用しています(2013年9月現在)。やっぱり何かと便利です。今日は、そのTwitter Bootstrapでタブを使ったときに少し手こずったので忘れない為にメモしておきます。
※Twitter Bootstrapのバージョンは2.0.4

Twitter Bootstrapのタブは以下のようなものです。

Homeです。
Profileです。
Messageです。
Settingsです。

では、順番に。

タブを表示する部分の記述

<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="home">Homeです。</div>
  <div class="tab-pane" id="profile">Profileです。</div>
  <div class="tab-pane" id="messages">Messageです。</div>
  <div class="tab-pane" id="settings">Settingsです。</div>
</div>

スクリプトファイルの読み込みと記述

<script>
  jQuery(function () {
    $('.tabs a:last').tab('show')
  })
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'template_url' );?>/js/bootstrap.js"></script>

私はjQueryの古いバージョンも読み込んでいるため、その読み込み順の違いで最初は動かずに手こずりました。(つまりBootstrapじゃないとこで手こずったということです)