Cacher is the code snippet organizer for pro developers

ul.tabs {
	margin: 0px;
	padding: 0px;
	list-style: none;

	li {
		background: none;
		color: #222;
		display: inline-block;
		padding: 10px 15px;
		cursor: pointer;

		&.current {
			background: #ededed;
			color: #222;
		}
	}
}

.tab-content {
	display: none;
	background: #ededed;
	padding: 15px;

	&.current {
		display: inherit;
	}
}

$(document).ready(function(){
    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    })
})

<ul class="tabs">
	<li class="tab-link current" data-tab="tab-1">Tab One</li>
	<li class="tab-link" data-tab="tab-2">Tab Two</li>
</ul>

<div id="tab-1" class="tab-content current"></div>
<div id="tab-2" class="tab-content"></div>