• HTML
• CSS
• JS

HTML

<div class="contenedor-pagina">
    <div class="pagina activa" id="pag1">
        <h3>Pag 1</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.
        </p>
    </div>
    <div class="pagina" id="pag2">
        <h3>Pag 2</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. 
        </p>
    </div>
    <div class="pagina" id="pag3">
        <h3>Pag 3</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.
        </p>
    </div>
    <div class="pagina" id="pag4">
        <h3>Pag 4</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.
        </p>
    </div>
</div>

<div class="paginacion">
    <a href="" class="activa">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <a href="">4</a>
</div>

CSS

body{
    font-family:sans-serif;
    color:#0e6251;
}
.contenedor-pagina{
    position:relative;
    width:100%;
    min-height:20rem;
    background:#a3e4d7;
    border:2px solid #48c9b0;
    overflow:hidden;
}
.pagina{
    position:absolute;
    top:0rem;
    right:-100%;
    width:100%;
    height:100%;
    background:#a3e4d7;
    text-align:center;
}

.pagina.activa{
    right:0rem;
}
.paginacion>a.activa{
    background:#48c9b0;
    color:#fff;
}
.paginacion{
    margin:2rem auto;
    display:block;
}
.paginacion>a{
    text-decoration:none;
    color:#0e6251;
    font-size:1.5rem;
    padding:1rem;
    background:#a3e4d7;
}

JS

$(function(){
    
    $(document).on("click",".paginacion>a",function(e){
        
        e.preventDefault();
        
        var elem = $(this);
        var num_elegido = $(this).text();
        var num_activo  = $(".paginacion").find(".activa").text();
        
        if(!$(this).hasClass("activa")){
            
            $(".paginacion").find(".activa").removeClass("activa");
            elem.addClass("activa");
            
             
            $("#pag"+num_activo).animate({"left":"-100%"},500,function(){
                $(this).css("left","100%");
            });
            
            $("#pag"+num_elegido).animate({"left":"0%"},500);
          
        }
    });
    
});