• HTML
• CSS
• JS

HTML

<div class="contenedor">
    <div class="pestana">
        <ul class="lista">
            <li class="activar" mostrar="#uno"><a>Registrar</a></li>
            <li mostrar="#dos"><a>Lista de contactos</a></li>
            <li mostrar="#tres"><a>Mensajes</a></li>
        </ul>
    </div>
    <div class="vista">
        <div id="uno" class="activar">Aquí registramos...</div>
        <div id="dos">Aquí irían la lista de los contactos...</div>
        <div id="tres">Aquí irían los mensajes...</div>
    </div>
</div>

CSS

body{
    margin:1rem;
    font-family:sans-serif;
    background:#ebdef0;
}

.pestana{
    text-align:center;
}
.lista{
      list-style:none;
    color:#6c3483;
    padding-bottom:0.5rem;
    border-bottom:1px solid #d7bde2;  
}
.lista>li{
    padding:0rem 0.5rem 0rem 0.5rem;
    display:inline-block;
    cursor:pointer;
}

.lista>li.activar>a{
        border-bottom:2px solid #5b2c6f;
    padding-bottom:0.5rem;
}
.lista>li.activar>a:hover{
       border-bottom:2px solid #5b2c6f;
    padding-bottom:0.5rem;
}
.lista>li>a:hover{
        border-bottom:2px solid #bb8fce;
    padding-bottom:0.5rem;
}
.vista>div{
    display:none;
}
.vista>div.activar{
    display:block;
}

#uno,#dos,#tres{
    min-height:300px;
    padding:0.5rem;
    color:#aeb6bf;
    background:#fff;
}

JS

$(document).ready(function(){
    
   $(".lista>li").on("click",function(){
       
        var id = $(this).attr("mostrar");
        
        $(this).addClass("activar").siblings().removeClass("activar");
        $(".vista>div").removeClass("activar").siblings(id).addClass("activar");
        
   });
   
});