タブをクリックすると非同期に内容が切り替わるという感じのコンテンツを作ってみたいと思います。
表示スペースが限られている場所に沢山の情報を詰め込むのに便利なアレです。
調べると、jQuery を使う方法と CSS のみで実装する方法が見つかりましたが jQuery の方が簡単そうなのでこちらでやってみます。
下記を参考に少しだけ変えてみました。
まずは HTML の部分。
<html>
<head>
<meta charset='utf-8'>
<link href='tab.css' rel='stylesheet'>
</head>
<body>
<div id="switch">
<ul>
<li class="select">タブ1</li>
<li>タブ2</li>
<li>タブ3</li>
</ul>
<div class="content">
<div>
<p>風はゴーシュのせいせいマッチたちにあとを運び音だた。またそうそれどころたませという下たます。生意気ましましことたはですところが足ぶみの生意気げのなかのはまして気の毒ましましけれども、ぼくほどかっこうへまえれんましまし。</p>
</div>
<div class="hide">
<p>リボンは出しとあとが込みですた。誰はほっとお母さんも悪いのだてゴーシュはあんまりいいんならた。「こんどのさっきのドレミファが。歩い。」何もそうのみたです。ねずみもいまあけるていた。楽器は一砕けドレミファのようへついて行きていまし。ガラスも小屋ゴーシュやそれを云ってきた。歌は狸にこうにしょって曲がゴーシュのように飛びたちておしまいがなっとどうも壁に聞いてしまうだ。もうぴたっと楽長に狸を待てたた。</p>
</div>
<div class="hide">
<p>何もいっぺんのときのちょっと毎日のところへ弾きたた。ホールは風をご楽屋へ笑いて人をひまをやめのでそっといまたっせましときをけりたまし。のそのそおじぎ云うて、あるてなっとやろますて表情がするとゴーシュをじっと時弾いたな。</p>
</div>
</div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script>
$(function() {
$("#switch li").click(function() {
var index = $("#switch li").index(this);
$(".content div").css("display", "none");
$(".content div").eq(index).css("display", "block");
$("#switch li").removeClass("select");
$(this).addClass("select")
});
});
</script>
</body>
</html>
次はスタイルシート。
@charset "UTF-8";
#switch {
overflow: hidden;
width: 600px;
max-height: 300px;
}
#switch ul {
list-style: none;
margin: 0;
padding: 0;
}
#switch li {
background: #ccc;
padding: 5px 25px;
float: left;
margin-right: 1px;
cursor: pointer;
}
#switch li.select {
background: #eee;
}
#switch .content div {
background: #eee;
padding: 20px;
height: 100%;
}
#switch .content .hide {
display: none;
}
スポンサーリンク
サンプル
投稿記事内に無理やり詰め込んでみました。表示が少しおかしいですが上手く出来ました。
- タブ1
- タブ2
- タブ3
風はゴーシュのせいせいマッチたちにあとを運び音だた。またそうそれどころたませという下たます。生意気ましましことたはですところが足ぶみの生意気げのなかのはまして気の毒ましましけれども、ぼくほどかっこうへまえれんましまし。
リボンは出しとあとが込みですた。誰はほっとお母さんも悪いのだてゴーシュはあんまりいいんならた。「こんどのさっきのドレミファが。歩い。」何もそうのみたです。ねずみもいまあけるていた。楽器は一砕けドレミファのようへついて行きていまし。ガラスも小屋ゴーシュやそれを云ってきた。歌は狸にこうにしょって曲がゴーシュのように飛びたちておしまいがなっとどうも壁に聞いてしまうだ。もうぴたっと楽長に狸を待てたた。
何もいっぺんのときのちょっと毎日のところへ弾きたた。ホールは風をご楽屋へ笑いて人をひまをやめのでそっといまたっせましときをけりたまし。のそのそおじぎ云うて、あるてなっとやろますて表情がするとゴーシュをじっと時弾いたな。