jQuery set active/placez les images de fond

J'ai une liste de 5 éléments, le premier (de la charge) est active (avec une classe de "actif" et ajouté par jQuery). Ils ont tous des images d'arrière-plan associé avec eux. Si je clique sur un des li est une autre div mises à jour avec du contenu (c'est le travail).

Cependant, je suis aux prises avec les éléments suivants:

Si vous cliquez sur un li, mise à jour de son image de fond la couleur (suffixe " - cl.png'). Quand j'ai passez la souris au dessus d'une autre, mettre à jour son image de fond la couleur et de garder l'cliqué sur l'un (avec une classe de 'active') trop de couleur. Si une batterie li n'est pas planait au-dessus de définir l'image d'arrière-plan en noir et blanc (suffixe " - bw.png') mais gardez à l'actif d'une seule couleur.

Espère que je vous ai expliqué moi-même clairement. Des idées sur comment je peut faire? Merci, Brett

Voici mon code HTML:

<ul class="graduate_tab">
<li class="graduate1"><a href="#grad1"><span class="gradimg1">grad1</span></a></li>
<li class="graduate2"><a href="#grad2"><span class="gradimg2">grad2</span></a></li>
<li class="graduate3"><a href="#grad3"><span class="gradimg3">grad3</span></a></li>
<li class="graduate4"><a href="#grad4"><span class="gradimg4">grad4</span></a></li>
<li class="graduate5"><a href="#grad5"><span class="gradimg5">grad5</span></a></li></ul>

OriginalL'auteur Brett | 2010-07-19

  1. 4

    Tout d'abord, je voudrais faire plus du travail dans le CSS, comme ceci:

    .graduate1 { background: url(image1-bw.png); }
.graduate1.active, .graduate1:hover { background: url(image1-cl.png); }
.graduate2 { background: url(image2-bw.png); }
.graduate2.active, .graduate2:hover { background: url(image2-cl.png); }
//etc...

    Puis en jQuery tout ce que vous devez vous préoccuper est de la active classe, comme ceci:

    $('.graduate_tab li').click( function() {
  $(this).addClass('active').siblings().removeClass('active');
});

    À l'aide de .addClass() sur les cliqué sur l'un et .removeClass() sur le reste de déplacer le active classe à l'cliqué sur un...si vous voulez être en mesure de le supprimer à partir d'un déjà active (désactivez), vous pouvez remplacer .addClass() avec .toggleClass() de ce comportement.

    OriginalL'auteur Nick Craver

  2. 4
    $('.graduate_tab li').hover(
  function() { 
    $(this).css('background-image','your-image-cl.jpg'); 
  }, function() {
    $(this).css('background-image','your-image.jpg'); 
  });

$('.graduate_tab li').click( function() {
  $('.graduate_tab li').removeClass('active');
  $(this).addClass('active');
});

    Cela devrait faire l'affaire. Dans le cas où j'ai oublié quelque chose, dites-moi, et je vais modifier le code.

    Squ36, merci pour la réponse. Ce n'est pas tout à fait ce que je suis après. Ce que j'ai besoin de le faire détecter li est planait, ensemble que l'on à de la couleur, de garder le 'cliqué' une couleur, puis définissez le reste de b&w. Tous les iamges sont différents, mais ils correspondent à la li convention de nommage par exemple. graduate1-bw.png, graduate2-cl.png, etc.

    OriginalL'auteur 3rgo

  3. 2

    J'ai utilisé le click hover fonction jquery. Pas besoin de donner à chaque li une classe css. Donc:

    .ui-state-active, .ui-state-hover  {
    font-weight: bold !important;
    //and other css
}

    et 

     jQuery('.graduate_tab li').bind('click hover', function () {
        jQuery(this).addClass('.ui-state-active')
                    .siblings().removeClass('.ui-state-active');

 });

    Espère que cela aide quelqu'un.

    OriginalL'auteur RICHARD HARTMAN

  4. 0

    vous pouvez utiliser la
    :hover

    propriété en css

    active:hover {background-color:black;}

    quelque chose comme ça...

    mais je ne suis pas sûr que cela fonctionne dans ie6.

    OriginalL'auteur guy schaller

  5. 0
        $('.titleclz').mouseenter(function( event ) {

    $(this).css('background-image','url(bg-image1.png path)');
    $(this).css('background-repeat','no-repeat'); 

});

$(".titleclz").mouseleave(function( event ) {

    $(this).css('background-image','url(bg-image2.png path)');
    $(this).css('background-repeat','no-repeat');

});

    JQuery obtenir fond de l'image hover effet...

    OriginalL'auteur Sumith Harshan