탭

HTML

<ul>
	<li><a href="#tab1" class="tab on preventD">1</a></li>
	<li><a href="#tab2" class="tab preventD">2</a></li>
</ul>
           		
<div class="panels">
	<div class="panel" id="tab1">1</div>
	<div class="panel" id="tab2">2</div>   			
</div>
 
<!-- js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

CSS

ul > li > a.on{color: red;}
.panels > .panel{display: none;}
.panels > .panel#tab1{display: block;}

JAVASCRIPT

$(document).ready(function(){
    function preventD(a){
        a.click(function(event){
            event.preventDefault();
        });
    }

    preventD($('.preventD'));
	
	$('.tab').click(function(){
		$('.tab').removeClass('on');
		$(this).addClass('on');
		$('.panel').css('display','none');
		$($(this).attr('href')).css('display','block');
	});
});