-1

Tengo una carpeta con varios documentos html dentro sin numerar (proyecto-a.html, proyecto-b.html, proyecto-c.html) y lo que quiero es colocar en cada uno de ellos unos botones de next/prev para navegar entre ellos.

  • Cuando esté en "proyecto-b.html" y pinche en next, voy a "proyecto-c.html" y cuando pinche en prev, iré a "proyecto-a.html".
  • Cuando esté en "proyecto-c.html" y pinche en next, voy a "proyecto-a.html" y cuando pinche en prev, iré a "proyecto-b.html".
  • Cuando esté en "proyecto-a.html" y pinche en next, voy a "proyecto-b.html" y cuando pinche en prev, iré a "proyecto-c.html"

¿Hay alguna manera de hacer esto con js?

Muchas gracias,

2
  • Muestra el código que tengas o lo que has intentado para que la gente te pueda ayudar mejor
    – Joacer
    el 15 ene. 2020 a las 8:48
  • Bienvenido a SO, enseña lo que llevas intentado en codigo y te podremos ayudar mejor. Tambien te digo, si, claro que se puede hacer, se me ocurre sin pensar mucho, algo como comprobar con un if la letra que haya despues de proyecto,(con un split) y si es 'a', que vaya 'b', y asi hasta tener todo. Muestranos el codigo, y saldran mas opciones.
    – cupax64
    el 15 ene. 2020 a las 9:30

1 respuesta 1

2

Pues aquí tienes, lo he probado ahora en local y me ha funcionado genial. Te explico:

Este es el código que has de poner en tu fichero js:

$(document).ready(function() {
    $('#btnPrev').click(function(event) {
        var url = window.location.href;

        var ficheroActual = url.substring(url.lastIndexOf('/') + 1)

        switch(ficheroActual){
            case 'proyecto-a.html':
                urlFinal = url.replace(url.substring(url.lastIndexOf('/') + 1), 'proyecto-c.html')
                window.location.replace(urlFinal);
                break;
            case 'proyecto-b.html':
                urlFinal = url.replace(url.substring(url.lastIndexOf('/') + 1), 'proyecto-a.html')
                window.location.replace(urlFinal);
                break;
            case 'proyecto-c.html':
                urlFinal = url.replace(url.substring(url.lastIndexOf('/') + 1), 'proyecto-b.html')
                window.location.replace(urlFinal);
                break;
        }
    });

    $('#btnNext').click(function(event) {
        var url = window.location.href;

        var ficheroActual = url.substring(url.lastIndexOf('/') + 1)

        switch(ficheroActual){
            case 'proyecto-a.html':
                urlFinal = url.replace(url.substring(url.lastIndexOf('/') + 1), 'proyecto-b.html')
                window.location.replace(urlFinal);
                break;
            case 'proyecto-b.html':
                urlFinal = url.replace(url.substring(url.lastIndexOf('/') + 1), 'proyecto-c.html')
                window.location.replace(urlFinal);
                break;
            case 'proyecto-c.html':
                urlFinal = url.replace(url.substring(url.lastIndexOf('/') + 1), 'proyecto-a.html')
                window.location.replace(urlFinal);
                break;
        }
    });
});

Como verás, en este código lo que se hace es capturar la dirección, cojo el último segmento de la URL para saber que fichero es el que estamos viendo y, a partir de aquí mediante un switch, compruebo hacia donde tenemos que ir, montando la URL en consecuencia.

Entonces, los botones que he puesto en mis ficheros HTML són estos, simple y llanamente (aquí ya los maquetarás tu):

<button id="btnPrev">Prev.</button>
<button id="btnNext">Next.</button>

Y al final, esta es la plantilla HTML para los 3 ficheros:

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="navegacion.js"></script>
    </head>
    <body>
        <button id="btnPrev">Prev.</button>
        <button id="btnNext">Next.</button>
    </body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.