動かざることバグの如し

近づきたいよ 君の理想に

Bootstrap3を使ってタブメニューを実装する

html javascript

なんてことはない、テンプレートに用意されているから特に加える点はない
タブの切替にはjquery.jsが必要だからそこだけ注意。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Bootstrap3を使ってタブメニュー</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>
<ul class="nav nav-tabs">
	<li class="active"><a href="#home" data-toggle="tab">タブメニュー１</a></li>
	<li><a href="#profile" data-toggle="tab">タブメニュー２</a></li>
	<li><a href="#messages" data-toggle="tab">タブメニュー３</a></li>
</ul>
<div class="tab-content">
	<div class="tab-pane active" id="home">ああああああああああ</div>
	<div class="tab-pane" id="profile">いいいいいいいいいい</div>
	<div class="tab-pane" id="messages">ううううううううううう</div>
</div>
	<script src="//code.jquery.com/jquery.js"></script>
	<script src="js/bootstrap.min.js"></script>
	</body>
</html>