Problem z szybkim przejściem do podstrony JavaScript

Question

Cześć,

Mam taki problem że klikając w odnośniki aby szybko przejść do podstrony zamienia mi tylko treść ale niestety nie zmienia mi tekstu w menu :(

Dopiero po kliknięciu w przyciski <> zmienia mi tekst w menu.

Czy możecie mi pomóc z moim problemem? Jak zrobić aby po kliknięciu w szybkie przejście do podstrony zmienił również tekst na odpowiedni do podstrony w menu?

Link do kodu : https://codepen.io/Jafaj/pen/VwbQaNb

Wielkie dzięki za wszelką okazaną pomoc

Comments

Trochę nie w temacie, ale masz w kodzie

  $("#" + slides[id]).css("opacity", 1);
  $("#" + slides[id]).css("display", "block");

jquery można zapisać to tak  

 $("#" + slides[id]).css({ "opacity": "1", "display": "block" });

 

---

Spoko bo mi się to przełącza ale menu odpowiednie do podstrony mi się nie przełącza

Answer 1

Pomysł jest taki.

Dodanie atrybutu data-id do każdego item nawigacji "Szybkie przejście do podstron" w celu identyfikacji, który został kliknięty, chociaż lepszy byłby chyba href ale to już sam popraw :)

<li data-id="0">
    <span class="sk-footer-text font-weight-bold" style="cursor: pointer;">Strona Główna</span>
</li>
<li data-id="1">
   <span class="sk-footer-text font-weight-bold" style="cursor: pointer;">Strona 1</span>
</li>
...itd

Utworzenie zmiennej globalnej number trzymającej aktualne id widocznego contentu i aktualizacja jej po każdym kliku next, prev.

let number = 0;

function moon(direction = null) {
    const n_planet = planets.length;
    let moon_next;

    if (direction == "prev") {
        number = (!number) ? 7 : --number;
        moon_next = ++moon_id % n_planet;
        if (moon_id > 7) moon_next = moon_id = 0;
    } else if (direction == "next") {
        number++
        number = (number == 8) ? 0 : number++;

        moon_next = --moon_id % n_planet;
        if (moon_id < 0) moon_next = moon_id = 7;
    } else {
        moon_next = moon_id = 0;
    }

    showSlide(moon_next);
    planets.forEach((planet) => { planet.style.visibility = 'hidden'; });
    planets[moon_next].style.visibility = 'visible';
}

Kliknięcie w "Szybkie przejście do podstron" odpala symulacje liczby kliknięć w next , prev w zależności od różnicy między data-id a number

$(".list-unstyled").on("click", "li", function () {
    const id = $(this).data('id');
    const count = id - number;

    for (i = 0; i < Math.abs(count); i++) {
        if (Math.sign(count) > 0) {
            $("#next").click();
        } else {
            $("#prev").click();
        }
    }
});