タブでパネルの切り替え

タブでパネルの切り替え

1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur error totam porro maiores at! Sit, amet, commodi distinctio eius error quia et quam sint quas aspernatur fuga!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur
2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur error totam porro maiores at! Sit, amet, commodi distinctio eius error quia et quam sint quas aspernatur fuga!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur
3: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur error totam porro maiores at! Sit, amet, commodi distinctio eius error quia et quam sint quas aspernatur fuga!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur
4: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur error totam porro maiores at! Sit, amet, commodi distinctio eius error quia et quam sint quas aspernatur fuga!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur 

<div id="switchTabs">
	<div class="tab-index">
		<ul>
			<li class="active"><a href="#tab1">1: Lorem ipsum</a></li>
			<li><a href="#tab2">2: dolor sit</a></li>
			<li><a href="#tab3">3: consectetur adipisicing elit</a></li>
			<li><a href="#tab4">4: Fuga</a></li>
		</ul>
	</div>

	<div class="tab-contents active" id="tab1">
		1: Lorem ipsum dolor sit amet・・・・
	</div>

	<div class="tab-contents active" id="tab2">
		2: Lorem ipsum dolor sit amet・・・・
	</div>
</div>


/*[ Tab Index ] --------------------------- */
#switchTabs .tab-index ul {
	display: table;
	width: 100%;
	text-align: center;
	}
#switchTabs .tab-index li {
	display: table-cell;
	margin: 0 auto;
	padding: .5rem;
	vertical-align: middle;
	border: 1px #ccc solid;
	border-radius: 5px 5px 0px 0px;
	background-color: #f4f4f4;
	}
#switchTabs .tab-index a {
	display: block;
	width: 100%;
	text-decoration: none;
	}
#switchTabs .tab-index .active {
	background-color: #ff9;
	border-bottom: none;
	}

/*[ Contents ] --------------------------- */
#switchTabs .tab-contents {
	border: 1px orange solid;
	border-top: none;
	border-radius: 5px;
	magin: -2px auto 2rem;
	padding: 1rem;
	}
#switchTabs .tab-contents {
	display: none;
	}
#switchTabs .tab-contents.active {
	display: block;
	}


$(function(){
	$('.tab-index a').click(function(e){
		$('.tab-index .active').removeClass('active');
		$(this).parent().addClass('active');
		$('.tab-contents').each(function(){
			$(this).removeClass('active');
		});
		$(this.hash).addClass('active');
		e.preventDefault();
	});
});

TOP