在淡入淡出內容時從上一個單擊的元素中刪除活動類

我已經在每個按鈕之後創建了3個帶有段落內容的按鈕，當單擊按鈕時，它將淡入其後的段落，以及添加一個活動類到那個被點擊的按鈕。目前我已經設法實現淡入和淡出，但我似乎無法從前一次點擊的按鈕中刪除活動類，任何人都可以告訴我哪裏可能會出錯？也有可能是一種更簡單/更好的方式來創造效果我正在努力，所以所有的建議/幫助/建議都非常受歡迎。在淡入淡出內容時從上一個單擊的元素中刪除活動類

小提琴：http://jsfiddle.net/kyllle/nZFUP/3/

感謝凱爾

來源

2011-10-20 styler

嘗試從所有.clickMe鏈接移除.active類，那麼.active類添加到當前點擊鏈接：

$(document).ready(function() { 
    $('.clickMeInfo').hide(); 


    $('.clickMe').click(function() { 
     $('.clickMeInfo').fadeOut('fast'); 
     $(this).next('.clickMeInfo').fadeIn('fasst'); 
     $('.clickMe').removeClass('active'); 
     $(this).addClass('active'); 
    }); 
});

你可以也做一些優化，因爲相同的選擇器將被反覆使用：

$(document).ready(function() { 
    //cache the elements instead of selecting them multiple times 
    var $clickMe  = $('.clickMe'), 
     $clickMeInfo = $('.clickMeInfo'); 
    $clickMeInfo.hide(); 

    $clickMe.click(function() { 
     //find the index of the clicked element 
     var $this = $(this), 
      this_index = $clickMe.index($this); 
     //fade-out all the info elements, then select only the clicked index and fade it in 
     $clickMeInfo.fadeOut('fast').filter(':eq(' + this_index + ')').fadeIn('fast'); 

     $clickMe.removeClass('active'); 
     $this.addClass('active'); 
    }); 
});

以下是對上述優化的jsfiddle的更新：http://jsfiddle.net/nZFUP/4/

來源

2011-10-20 21:47:33 Jasper

在淡入淡出內容時從上一個單擊的元素中刪除活動類

回答

相關問題