Les liens s'affichent lorsque survolés - comment les rendre opaques lorsque leur cible est visible?

Question

Sur ma page j'ai quatre liens qui montrent et cachent un div chacun. Jetez un oeil here.

Le balisage des liens est la suivante:

<li class="togglelink fadein button" data-block="albums" id="togglealbums">Albums</li> 
<li class="togglelink fadein button" data-block="about" id="toggleabout">About Me</li> 
<li class="togglelink fadein button" data-block="contact" id="togglecontact">Contact</li> 

et

<img src="images/info.png" class="button nav_button fadein toggleinfo" id="info" alt="Show Info Pane" title="Show Info Pane"> 

Le CSS pour la classe fadein est la suivante:

.fadein {opacity:0.5; transition:opacity 0.5s; -webkit-transition:opacity 0.5s; -moz-transition:opacity 0.5s; -ms-transition:opacity 0.5s;} 
.fadein:hover {opacity:1.0;} 

Et le jQuery qui montre/cache les divs cibles est la suivante:

$('.togglelink').on('click',function() { 
    var id = $(this).data('block'); 
    $('#'+id).fadeToggle('slow').siblings('.toggleblock').fadeOut('fast'); 
}); 

$('.toggleinfo').click(function() { 
    $('.info').fadeToggle('slow'); 
}); 

Ce que je veux arriver est que lorsque la div cible est ouvert (albums, about, contact et info, respectivement) le lien qui cible il reste à opacity: 1.0.

J'ai essayé ceci:

$('.togglelink,.toggleinfo').click(function() { 
    $(this).toggleClass('fadein active'); 
}); 

Lorsque la classe active est:

.active {opacity: 1.0;} 

Mais ce qui a eu deux questions: à l'aide des boutons de fermeture sur les vitres eux-mêmes ne causera pas les liens aller retour à semi-transparent, et, dans le cas des 3 meilleurs liens, cliquer sur un lien puis sur un autre donnera deux liens complètement opaques.

Le code pour les boutons de fermeture est comme ceci:

<img src="images/close_pane.png" class="togglelink fadein close_pane button" data-block="albums" alt="Close Album List" title="Close Album List"> 

Comment puis-je résoudre ces problèmes? Merci!

Answer 1

$('.togglelink,.toggleinfo').click(function() { 
    $(this).siblings('.active').toggleClass('fadein active'); 
    $(this).toggleClass('fadein active'); 
}); 

$('.close_pane').click(function(){ 
    $('li[data-block="'+ $('this').data('block') +'"]').removeClass('active').addClass('fadein'); 
}); 

Answer 2

var id = $(this).data('block'); devrait être var id = $(this).attr('data-block');

En outre, vous pouvez supprimer la classe fadein et il suffit d'utiliser fadeIn() de jQuery? fadeIn() de jQuery affecte le style inline sur la balise, ce qui explique peut-être pourquoi cela ne fonctionne pas.

$('.togglelink').click(function() { 
    var id = $(this).attr('data-block'); 
    $('#'+id).fadeToggle('slow'); 
    $(this).siblings().fadeOut('fast'); 
});