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');
});
});