Come cambiare la scheda del colore quando la si seleziona

Voglio impostare il colore della scheda quando faccio clic su di essa. Il mio codice è:

 

Come farlo?

 var value= "#ui-id-"; var nithin = value +''+ $('#hidden').val(); $(nithin).click(function () { $(nithin).css('background','red'); var hidden=(parseInt('#hidden').val())+1; $('#hidden').val(hidden); }); 

Aggiunto css per una class chiamata “selected” che imposta il colore di sfondo. Usando jQuery, puoi impostare un gestore di clic per le tue tabs, e quando viene cliccato, rimuovi la class “selezionata” da tutte le tabs, quindi aggiungila a quella su cui è stato fatto clic, in questo modo:

 $(document).ready(function(){ $('#tabs ul li a').click(function(ev){ $('#tabs ul li').removeClass('selected'); $(ev.currentTarget).parent('li').addClass('selected'); }); }); 

Ho creato un violino per dimostrarlo. Mi sono preso la libertà di acconciare le tue tabs un po ‘per farle sembrare delle tabs. Dai un’occhiata qui: http://jsfiddle.net/d23Nk/

 $('div#tabs ul li a').click(function() { $(this).parents('div#tabs').children('div').removeClass('activeColor'); var theHref = $(this).attr('href'); $('div#' + theHref).addClass('activeColor'); }); 

Quindi basta definire queste classi CSS per avere i colors che vuoi

CSS

 #tabs ul li { float:left } #tabs div { display:none; clear:both } #tabs div.selected { display:block } 

HTML

 
tab 1 content
tab 2 content
tab 3 content

JQuery

 $(document).ready(function(){ $('#tabs ul li a').click(function(){ $('#tabs ul li, #tabs div').removeClass('selected'); var x = $(this).parent().index(); $(this).parent().addClass('selected'); $('#tabs div:eq('+x+')').addClass('selected'); return false; }); }); 

Non richiede tutti gli ID univoci, né è necessario aggiungere classi prima che il javascript abbia il tempo di interagire con loro.