Tabs

Tab 1
Tab 2
Tab 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia minima ex pariatur eum iste quibusdam facere repellat in similique numquam sapiente voluptas esse fugit itaque excepturi aperiam illo labore suscipit quia dolores, quisquam blanditiis aliquam accusamus explicabo dolorum! Facere, beatae.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio iure reprehenderit tempora, quisquam, voluptates ipsa sapiente tempore impedit deleniti repellat labore, dolorum et suscipit at quos veniam maiores cupiditate explicabo non perspiciatis nihil odit inventore rem. Fuga reiciendis quae ratione, alias eligendi, velit itaque vero tempore commodi voluptas, tempora assumenda!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi odit accusantium facilis vitae qui voluptatum neque voluptate laudantium porro inventore odio veritatis voluptas, omnis natus ipsa consectetur illum provident aperiam nam autem quisquam quis laborum, harum numquam excepturi! Animi at in enim recusandae cupiditate ipsum veniam ab dignissimos consequuntur quaerat! Eius nesciunt nemo culpa, ex perferendis, minus dignissimos eligendi atque.

Examples:

JSFiddle

HTML

<div class="container">
	<ul>
		<li class="tab_list active" data-tab="tab_1">Tab 1</li>
		<li class="tab_list" data-tab="tab_2">Tab 2</li>
		<li class="tab_list" data-tab="tab_3">Tab 3</li>
	</ul>
</div>
<div class="container">
	<div class="tabs_content active" id="tab_1">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia minima ex pariatur eum iste quibusdam facere repellat in similique numquam sapiente voluptas esse fugit itaque excepturi aperiam illo labore suscipit quia dolores, quisquam blanditiis aliquam accusamus explicabo dolorum! Facere, beatae.
	</div>
	<div class="tabs_content" id="tab_2">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio iure reprehenderit tempora, quisquam, voluptates ipsa sapiente tempore impedit deleniti repellat labore, dolorum et suscipit at quos veniam maiores cupiditate explicabo non perspiciatis nihil odit inventore rem. Fuga reiciendis quae ratione, alias eligendi, velit itaque vero tempore commodi voluptas, tempora assumenda!
	</div>
	<div class="tabs_content" id="tab_3">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi odit accusantium facilis vitae qui voluptatum neque voluptate laudantium porro inventore odio veritatis voluptas, omnis natus ipsa consectetur illum provident aperiam nam autem quisquam quis laborum, harum numquam excepturi! Animi at in enim recusandae cupiditate ipsum veniam ab dignissimos consequuntur quaerat! Eius nesciunt nemo culpa, ex perferendis, minus dignissimos eligendi atque.
	</div>
</div>

CSS

.container{width:60rem;margin:0 auto}
.container ul{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;margin:0 0 1rem;padding:0}
.container ul li{margin:0;padding:.5rem 0;text-align:center;list-style:none;width:33.33%;border-bottom:.1rem solid grey;cursor:pointer;-webkit-transition:.3s;-o-transition:.3s;-moz-transition:.3s;transition:.3s}
.container ul li.active{border-bottom:.1rem solid #ff0}
.container ul li:hover{-webkit-transition:.3s;-o-transition:.3s;-moz-transition:.3s;transition:.3s;border-bottom:.1rem solid red}

.container .tabs_content{display:none}
.container .tabs_content.active{display:block}

SCSS

.container{
	width: 60rem;
	margin: 0 auto;
	
	ul {
		display:flex;
		margin:0 0 1rem;
		padding:0;
		
		li {
			margin:0;
			padding: 0.5rem 0;
			text-align:center;
			list-style:none;
			width:33.33%;
			border-bottom: 0.1rem solid grey;
			cursor:pointer;
			transition: 0.3s;
			
			&.active {
				border-bottom: 0.1rem solid yellow;
			}
			
			&:hover {
				transition: 0.3s;
				border-bottom: 0.1rem solid red;
			}
		}
	}
	
	.tabs_content {
		display:none;
			
		&.active {
			display:block;
		}
	}
}

JavaScript

function tabs(tabName, tabContent){
	$('.'+tabName).click(function(){
		$('.'+tabName).removeClass('active');
		$('.'+tabContent).removeClass('active');
		$(this).addClass('active');
		var tab = $(this).data('tab');
		$('#'+tab).addClass('active');
	})
}

tabs('tab_list','tabs_content');