NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

jQueryだけでつくるシンプルタブ

2013年3月31日jQueryのみでつくるギミック

シンプルタブ

画面遷移させず要素をシンプルにタブで切り替える仕組みをjQueryだけでつくります。

デモページ

JavaScript

(function($){
	$(function() {
		
		$('.tabSection .content:not(:first)').hide();
		
		$('.tabSection .tab li').click(function() {
			$('.tabSection .tab li').removeClass('current');
			$(this).addClass('current');
			$('.tabSection .content').hide();
			var select = $(this).find('a').attr('href');
			$(select).show();
			return false;			
		});
		
	});
})(jQuery);

HTML

<div class="tabSection">
	<ul class="tab">
		<li class="current"><a href="#tab01">tab01</a></li>
		<li><a href="#tab02">tab02</a></li>
		<li><a href="#tab03">tab03</a></li>
	</ul>
	<div id="tab01" class="content">
		<p>tab01 content</p>
	</div>
	<div id="tab02" class="content">
		<p>tab02 content</p>
	</div>
	<div id="tab03" class="content">
		<p>tab03 content</p>
	</div>
</div>

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. jQueryだけでつくるシンプルタブ

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com