NAKAZI LAB.(ナカジラボ)

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

上下連動タブ

2013年12月6日jQueryのみでつくるギミック

上下連動タブ

上下どちらかのタブをクリックすると、上下のタブが連動しつつ要素が切り替わります。

デモページ

JavaScript

(function($){
	$(function() {

	 $('.tab>li').click(function() {
	  var num = $(this).parent().children('li').index(this);
	  $('.tab').each(function(){
	   $('>li',this).removeClass('current').eq(num).addClass('current');
	  });
	  $('.tabSection .contents .content').hide().eq(num).show();
	 }).first().click();

	});
})(jQuery);

HTML

<div class="tabSection">

	<ul class="tab top">
		<li><a href="#">tab1</a></li>
		<li><a href="#">tab2</a></li>
		<li><a href="#">tab3</a></li>
	</ul>
	
	<div class="contents">
		<div class="content"><p>tab01 content</p></div>
		<div class="content"><p>tab02 content</p></div>
		<div class="content"><p>tab03 content</p></div>
	</div>
	
	<ul class="tab bottom">
		<li><a href="#">tab1</a></li>
		<li><a href="#">tab2</a></li>
		<li><a href="#">tab3</a></li>
	</ul>
	
</div>

CSS

.tabSection {
	width: 600px;
	margin: 0 auto;
}
.tab { _position: relative; }
.top { margin-bottom: -1px; }
.bottom { margin-top: -1px; }
.tab li {
	display: inline;
	margin-right: 3px;
	list-style: none;
}
.tab a {
	display: inline-block;
	padding: 5px 10px;
	border: 1px solid #cccccc;
	background: #eeeeee;
	text-decoration: none;
	color: #444444;
	_zoom: 1;
}
.tab li.current a {
	background: #ffffff;
	color: #ff5b6b;
}
.top .current a { border-bottom: 1px solid #ffffff; }
.bottom .current a { border-top: 1px solid #ffffff; }
.tabSection .contents .content {
	padding: 60px 20px;
	border: 1px solid #cccccc;
	background-color: #ffffff;
}

デモページ

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

関連記事

  1. 上下連動タブ

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

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

連絡先

nakazilab[atmark]gmail.com