Scrollspy - styl dla zawartości aktywnego odnośnika

Question

Mam użyty scrollspy na stronie. Wszystko działa, także dla aktywnych linków nadałam style, tylko, że chciałabym zmienić kolor tła dla odpowiadającej aktywnemu  linkowi zawartości.  Używam np. $(".element_1").hasClass('active') {} ......ale to nie działa :( Jak to zrobić?

Answer 1

Metoda hasClass zwraca true/false, więc powinna zostać użyta w instrukcji warunkowej. Podaj więcej kodu, bo może namieszałaś.

Comments

    if ( $('.s1').hasClass('active') ) {
      $('#section_1').css("opacity","1");
    }
    if ( $('.s2').hasClass('active') ) {
      $('#section_2').css("opacity","1");
    }
    if ( $('.s3').hasClass('active') ) {
      $('#section_3').css("opacity","1");
    }
    if ( $('.s4').hasClass('active') ) {
      $('#section_4').css("opacity","1");
    }
    if ( $('.s5').hasClass('active') ) {
      $('#section_5').css("opacity","1");
    }
    if ( $('.s6').hasClass('active') ) {
      $('#section_6').css("opacity","1");
    }
    if ( $('.s7').hasClass('active') ) {
      $('#section_7').css("opacity","1");
    }

 

Każdy odnośnik ma klasę kolejno: s1, s2, s3....itd. i jest połączony z elementem (zawartością), i te powiązane elementy mają id, kolejno section_1, section_2...itd Chcę im nadać style :(
Zawatości mają opacity 0.5, a gdy jakiś jest aktywny chcę aby miał opacity: 1.

---

I gdzie to wywołujesz ? Powinno być coś takiego:

$('#idScrollspy').on('activate.bs.scrollspy', function () {
  //sprobuj dac te ify tutaj
});

Właściwie to zamiast tych ifów możnaby użyć pętli i tylko podmienić cyferki :)

---

Działa!!!
activate.bs.scrollspy ---> co to jest?

---

Działa, ale w jedną stronę. Elementy dostają ten styl, ale idąc dalej- pozostają z tym stylem a ja bym chciała aby znikał, jak już odnośniki nie mają klasy ,,active".

---

  $('#myScrollspy').on('activate.bs.scrollspy', function () {
    if ( $('.s1').hasClass('active') ) {
      $('#section_1').css("opacity","1");
    }
    if (!$('.s1').hasClass("active")) {
    $('#section_1').css("opacity","0.5");
    }
    if ( $('.s2').hasClass('active') ) {
      $('#section_2').css("opacity","1");
    }
    if (!$('.s2').hasClass("active")) {
    $('#section_2').css("opacity","0.5");
    }
    if ( $('.s3').hasClass('active') ) {
      $('#section_3').css("opacity","1");
    }
    if (!$('.s3').hasClass("active")) {
    $('#section_3').css("opacity","0.5");
    }
    if ( $('.s4').hasClass('active') ) {
      $('#section_4').css("opacity","1");
    }
    if ( $('.s5').hasClass('active') ) {
      $('#section_5').css("opacity","1");
    }
    if ( $('.s6').hasClass('active') ) {
      $('#section_6').css("opacity","1");
    }
    if ( $('.s7').hasClass('active') ) {
      $('#section_7').css("opacity","1");
    }

  });

 

Dałam radę, dziękuję :)

---

activate.bs.scrollspy to nazwa eventu (zdarzenia), który odpala się, gdy, któryś z elementów będzie aktywowany przez Scrollspy.

Najlepiej jednak zaglądnąć do źródła (dokumentacja):

https://v4-alpha.getbootstrap.com/components/scrollspy/#events