탭

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