Scrollspy - styl dla zawartości aktywnego odnośnika

pytanie zadane 27 lipca 2017 w HTML i CSS przez SandraS Obywatel (1,400 p.)
edycja 27 lipca 2017 przez SandraS

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ć?

1 odpowiedź

odpowiedź 27 lipca 2017 przez Jedras Maniak (54,860 p.)
wybrane 27 lipca 2017 przez SandraS

Najlepsza

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

komentarz 27 lipca 2017 przez SandraS Obywatel (1,400 p.)

    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.

komentarz 27 lipca 2017 przez Jedras Maniak (54,860 p.)

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 :)

komentarz 27 lipca 2017 przez SandraS Obywatel (1,400 p.)

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

komentarz 27 lipca 2017 przez SandraS Obywatel (1,400 p.)

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".

komentarz 27 lipca 2017 przez SandraS Obywatel (1,400 p.)


  $('#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ę :)