當某個幻燈片在fullpage.js滑塊中具有活動類別時，如何隱藏元素？

Question

我正在使用fullpage.js，頁面上有一個固定元素，需要根據活動的幻燈片進行更改。 因此，基本上，如果幻燈片1是活動的，則顯示固定元素1。 如果幻燈片2是活動的，則顯示固定元素2，依此類推。 什么都沒有為我工作，我不知道為什么。

$('.fp-slidesNav a').click(function() {
        var activeSlide = $('.slide.active');
        if ((activeSlide).hasClass('slide1')) {
            $('fixedelement1').show();
            $('fixedelement1').siblings().hide();
        }
        else if ((activeSlide).hasClass('slide2')) {
            $('fixedelement2').show();
            $('fixedelement2').siblings().hide();
        }
       else if {
         ...
       }
});

我的類名可能有誤或我的所有代碼中都出現錯字，但我不這樣認為，因為我多次檢查了所有內容。 很奇怪，因為我可以

 $('a').click(function() {
       alert('hello');
});

當我單擊.fp-slidesNav錨點時，沒有收到任何警報，但單擊另一個隨機鏈接，我得到了警報。

Answer 1

使用afterSlideLoad（anchorLink，index，slideAnchor，slideIndex）

滾動結束后，一旦加載了部分幻燈片，就會觸發回調。 參數：

anchorLink：與該部分相對應的anchorLink。

index：該部分的索引。 從1.開始

slideAnchor：對應於幻燈片的錨點（如果有）

slideIndex：幻燈片的索引。 從1開始。（默認幻燈片不算作幻燈片，而是一部分）

如果沒有為幻燈片定義幻燈片鏈接，則slideIndex參數將是唯一使用的參數。 例：

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

    afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
        var loadedSlide = $(this);

        //first slide of the second section
        if(anchorLink == 'secondPage' && slideIndex == 1){
            alert("First slide loaded");
        }

        //second slide of the second section (supposing #secondSlide is the
        //anchor for the second slide
        if(index == 2 && slideIndex == 'secondSlide'){
            alert("Second slide loaded");
        }
    }
});

Answer 2

我認為@KishoreSahas是正確的。 但幾乎沒有改變/即興創作

假設您的固定元素在頁面上看起來類似於以下內容。 可能是帶有子div標簽的section標簽

<ul id="fixedelement">
  <li class="slide firstPage active"></li>
  <li class="slide secondPage "></li>
  <li class="slide thirdPage "></li>
  <li class="slide fourthPage "></li>

</ul>

您的滑塊代碼應如下所示

$('#myslider').fullpage({
  anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage']
  afterSlideLoad: function(anchorLink, index){
    $('#fixedelement .slide').each(function () {$(this).hide();}
    $('#fixedelement .' + anchorLink).each(function () {$(this).show();}
  }
});

我之前從未使用過fullpage.js，因此上述代碼未經測試。