addClass添加到所有未選擇的li當選擇一個li時//還添加翻頁動畫

Question

我有一個項目列表，其中一個li被單擊時，會在下面打開一個div。我也有它的樣式，以便在div打開時將Class添加到選定的li圖像。我想現在給我的jQuery添加一些東西，這樣當你點擊li和div打開時，所有其他的li模糊。我在我的CSS中添加了「.blur-logo」，但無法弄清楚如何在我的jQuery中執行此操作。

我也想加入代碼在選擇時翻轉li中的圖像，如果有人也能夠幫忙的話！

<ul> 
<li><a class="artist-logo" href="#artist-looka"><img src="images/looka-black-circle.png"></a></li> 
<li><a class="artist-logo" href="#artist-sremedy"><img src="images/sremedy-black-circle.png"></a></li> 
<li><a class="artist-logo" href="#artist-hyperbit"><img src="images/hyperbit-black-circle.png"></a></li> 
</ul> 

<div id="artist-looka" class="artist-box"> 
</div> 
<div id="artist-sremedy" class="artist-box"> 
</div> 
<div id="artist-hyperbit" class="artist-box"> 
</div>    




$(function(){ 

$("nav ul li a").click(function() { 
var navId= $(this).attr("href"); 
$("body, html").animate({scrollTop: $(navId).offset().top},500); 
return false; 
}); 

// Add class to each link on click. Remove when new link clicked 
$('#togglemenu1 ul li a').click(function(){ 
    $('nav ul li a').removeClass('selected'); 
    $(this).toggleClass('selected'); 
}); 
});  


$(document).ready(function() { 
    $(".artist-box").hide(); 
    $(".artist-logo").click(function(event) { 
     event.preventDefault(); 
     // get the clicked element 
     var clicked = $(this); 
     // get the selected element 
     var taggedWithSelect = $('.selected-artist'); 
     // get the corresponding divs 
     var clickPartner = $(clicked.attr('href')); 
     var selectPartner = $(taggedWithSelect.attr('href')); 
     // we either want to close this one or open this one and close any others 
     // if this one is open, it should be tagged with select 
     if(clicked.hasClass('selected-artist')) { 
      clicked.removeClass('selected-artist'); 
     } else { 
      clicked.addClass('selected-artist'); 
      taggedWithSelect.removeClass('selected-artist'); 
      selectPartner.slideToggle(); 
     } 
     clickPartner.slideToggle(); 
    }); 
}); 

Answer 1

首先爲每個列表標記（例如，li-artist-logo）添加一個類。然後爲每個列表標記添加一個id，併爲一個href添加onclick。然後，嘗試使用fadeTo爲每個藝術家徽標類和一個單獨的fadeTo爲被點擊的li的id：

<li id="li1" class="li-artist-logo"><a class="artist-logo" href="#artist-looka" onclick="FadeFunction('li1')"> 
<img src="images/looka-black-circle.png"></a></li> 

function FadeFunction(id) { 
    $(".li-artist-logo").fadeTo(1, 0.0, function() { 
     $("#" + id).fadeTo(1, 1.0); 
    }); 
}