Highilight un bouton après avoir appuyé sur javascript

Question

J'essaie de faire une galerie d'images simple avec html/css et un peu de javascript.Il est tout en place et de travail, mais une fonction.

Je veux que quand j'ouvre le index.html « All » serait déjà mis en évidence par mon style personnalisé et si on le pousse sur un autre point fort bouton irait à ce bouton particulier.

html d'un bouton ressemble à ceci

<input type='button' value='Design' class="cat-itiem" id='filterDesign'> 

modifier: Je fini par utiliser OnResolve's method et cela a fonctionné très bien (même pour quelqu'un qui ne connaît pas de JS) Merci à tous de l'aide! :)

Answer 1

J'ai créé un examen ple avec jsfiddle pour vous avec jQuery simple. Vous pouvez voir chaque aspect (balisage, css et jquery).

http://jsfiddle.net/p5ZUv/7/

Answer 2

en supposant que votre classe en surbrillance est appelée activeButton, vous pouvez faire ce qui suit avec jQuery

$(function() { 
    $(".cat-itemem").click(function() { 
     $(".cat-itemem").removeClass('activeButton'); 
     $(this).addClass('activeButton'); 
    } 
}) 

Answer 3

Vous pouvez certainement ajouter des styles sur le bouton clic via le css pur, mais pour mettre en évidence les autres, vous avez besoin de JavaScript.

HTML:

<input type='button' value='All' class="cat-itiem highlighted" id='filterAll'> 
    <input type='button' value='Design' class="cat-itiem" id='filterDesign'> 
    <input type='button' value='Logo' class="cat-itiem" id='filterLogo'> 
<input type='button' value='Photography' class="cat-itiem" id='filterPhotography'> 

CSS (Ajouter vôtre)

.cat-itiem{} 

.highlighted{background:green} 

JS (Jquery est utilisé)

$('.cat-itiem').click(function(){$('.cat-itiem').removeClass('highlighted'); $(this).addClass('highlighted')}