classe aggiunta non viene renderizzata

[groucho baffone]

un tag ul rappresenta una pulsantiera ed ogni suo tag li contiene un tag a che è un pulsante. al passaggio del mouse sul pulsante interviene l'hover che cambia colore allo sfondo e al testo del tag a. al clic, jquery assegna una seconda classe "attiva" allo stesso tag a che dovrebbe cambiare colore di sfondo e testo.
E invece la classe viene assegnata mentre la grafica resta quella precedente il clic..

<div id="map_nav">
        <div id="map_nav_menu">
            	<ul>[*]
                        <div id="accordion">
                            <div class="level">
                                Opzioni sentiero
                                <div class="expanded">
					<ul>
	[*]
						        <a id='tipo0' class='li-opzione' alt='no' onclick="sentieriScelta('tipo',this)">a piedi</a>
					        
						[*]
							<a id='tipo1' class='li-opzione' alt='no' onclick="sentieriScelta('tipo',this)">in bicicletta</a>
						
						<li style="padding-bottom:10px">
							<a id='tipo2' class='li-opzione' alt='no' onclick="sentieriScelta('tipo',this)">a cavallo</a>
						
						<li style="padding-bottom:10px">
							<a id='tipo3' class='li-opzione' alt='no' onclick="sentieriDisabili(this)">idoneo per disabili</a>
						
					[/list]
                                </div>
                             </div>
                        </div>
                    [/list]
            </div>
        </div>

- css -
#map_nav div ul li a{
text-decoration:none;
color:#33454E;
font-size:14px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color:#f1f2f2;
padding:6px 10px 6px 0;
display:block;
transition: all 0.1s ease-in;
}
#map_nav div ul li a{
background-position:10px 5px;
background-repeat:no-repeat;
}
#map_nav div ul li a:hover{
color:#FFF;
background-color:#43d58f;
cursorointer;
}
.attiva{
background-color:#2bb673;
color:#fff;
}

- jquery -

$(document).ready(function(){
	$("#map_nav div ul li a").click(function(){
		$(this).toggleClass("attiva");
	});
});

e il jquery è inserito nell'head dopo il link della pagina css