CSSが得意な渋谷のウェブデザイナーのウェブ開発メモ

[PR] Another American Dictionary Spanglish with us!

jQuery でタブ切り替えコンテンツ

スマホサイトでもよく使うjQueryです。CSSはおこのみでどうぞ。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Loremのイプサムの嘆きがAMET座る、consectetur adipiscing ELIT、eiusmod労働と肥満ように、temporと活力んsedの。長年にわたり、私はそれから、学区nostrudのaliquipの利点を行使してはならない人、来るが、動作させるためになります。 Duisは1 irureがcillumのdolore EUは何の結果を生成しない逃げるように欲望の痛みの喜びで批判されています。 Excepteur cupidatatブラックは、うまくいけば、あなたは罪のQUIのofficiaで、つまり、私の労苦、suntを女々しいとその精神を放棄されていません

html

<ul class="tabs">
	<li class="active"><a href="#tab1">ラテン語</a></li>
	<li class=""><a href="#tab2">日本語</a></li>
</ul>
<div id="tab1" class="content">
コンテンツA
</div>
<div id="tab2" class="content">
コンテンツB
</div>

javascript

<script type="text/javascript"> 
$(document).ready(function() {
	$(".content").hide(); 
	$("ul.tabs li:first").addClass("active").show(); 
	$(".content:first").show(); 
	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active"); 
		$(this).addClass("active");
		$(".content").hide();
		var activeTab = $(this).find("a").attr("href"); 
		$(activeTab).fadeIn();
		return false;
	});
});
</script>
関連記事
この記事役にたった?
管理者にだけメッセージを送る