• HTML
• CSS
• JS

HTML

<div class="contenedor">
    
    <div class="paginas">
        <div class="pag mostrar" id="m1">
            <span>Página 1</span>
        </div>
        <div class="pag" id="m2">
            <span>Página 2</span>
        </div>
        <div class="pag" id="m3">
            <span>Página 3</span>
        </div> 
        <div class="pag" id="m4">
            <span>Página 4</span>
        </div>
    </div>
    
    <div class="paginacion">
        <a href="#" class="activar">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
    </div>
    
</div>

CSS

.contenedor{
    font-family:sans-serif;
}
.paginas{
    width:300px;
    height:350px;
    margin:0px auto;
    position:relative;
}
.paginas .pag{
    width:100%;
    height:100%;
    border:1px solid #bfc9ca;
    background:#eaeded;
    display:none;
}
.paginas .mostrar{
    position:absolute;
    top:0px;
    left:0px;
    display:block;
}
.mostrar>span{
    font-weight:bold;
    font-size:16px;
    color:#85929e;
    position:absolute;
    top:45%;
    left:40%;
}
.paginacion{
    margin:10px 10px;
    text-align:center;
}
.paginacion a{
    font-size:20px;
    font-weight:bold;
    text-decoration:none;
    color:#2c3e50;
    cursor:pointer;
}
.paginacion a:hover{
    text-decoration:underline;
    color:blue;
}
.paginacion a.activar{
    text-decoration:underline;
    color:blue;
}

JS

$(function(){
    $(".paginacion a").click(function(){
        
        // recuperamos el número
        // removemos la clase 'mostrar' en todo los elementos
        // mostramos la página
        
        var num = $(this).text();
        $(".paginas .pag").removeClass("mostrar"); 
        $("#m"+num).addClass("mostrar");
        
        // removemos la clase 'activar' en todo los elementos
        // y activamos paginación
        
        $(".paginacion a").removeClass("activar");
        $(this).addClass("activar");
        
    });
});