jQuery ライブラリ不要 軽量かつ簡単にタブ切り替えコンテンツを作成する方法 – create tab menu

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは!

つい先日「簡単なopacity切替型スライダー」という記事を書いたので
ついでなので今回の記事もあげておきます。
これまたすごく簡単、簡潔、軽量なのでご活用いただければ幸いです。

タブ切り替えコンテンツを作成


<style type="text/css">
ul#list li{float: left;}
ul#list p {text-align: center;width: 50px; cursor:pointer;}
ul#list li div{position: absolute; top:20; left:0; width:640px;}
</style>

<script type="text/javascript">
$(function() {
$(‘#list div:not(:first)’).hide();
$(‘#list p’).each(function() {
$(this).click(function() {
$(‘#list div’).hide();
$(this).next(‘div’).toggle(‘fast’);
});
});
});
</script>

<ul id="list">
<li>
<p>tab1</p>
<div>
<h1 class="fo">TEXT1</h1>
This id content 1.
</div>
</li>
<li>
<p>tab2</p>
<div>
<h1 class="fo">TEXT2</h1>
This id content 2.
</div>
</li>
<li>
<p>tab3</p>
<div>
<h1 class="fo">TEXT3</h1>
This id content 3.
</div>
</li>
</ul>

ちなみに装飾部分は余分かと思い除いています。
デモで使っている装飾は以下です。
お好みで肉付けしてください。


h1.fo{font-weight:bold; font-size:80px;}
body{font-family:arial; text-align:justify;}
ul#list{width:640px; margin:30px auto 0px auto; left: 50%;margin-left: -320px;position: absolute;z-index:100;}
ul#list img{margin:20px 0}

DEMO

以上です。