jQuery UI - Accordéon - En-tête actif de style?

Question

Problème simple: J'utilise Accordion sans aucun thème d'interface utilisateur (juste barebones, en utilisant mon propre CSS). Jusqu'ici, tout va bien, sauf que je n'arrive pas à comprendre comment définir un style "actif" pour l'en-tête actuellement sélectionné.

Le code jQuery:

$("#menu").accordion({ 
    event: "mouseover", 
    header: "a.top" 
}); 

Le code HTML:

<a href="#" class="top">XXX1</a> 
<div class="sub"> 
    <a href="#">Subheading 1</a> 
    <a href="#">Subheading 2</a> 
    <a href="#">Subheading 3</a> 
</div> 

<a href="#" class="top">XXX2</a> 
<div class="sub"> 
    <a href="#">Subheading 1</a> 
    <a href="#">Subheading 2</a> 
    <a href="#">Subheading 3</a> 
</div> 

Cela fonctionne très bien, sauf que je ne peux pas trouver un moyen de définir les styles pour l'en-tête actif sans utiliser ThemeRoller.

Configuration manuelle des styles suivants dans mon CSS n'a pas d'effet:

.ui-state-active 
.ui-widget-content .ui-state-active 
.ui-state-active a 
.ui-state-active a:link 
.ui-state-active a:visited 

Assistance, s'il vous plaît?

Answer 1

$("#menu").accordion({ 
    header: "a", 
    event: mouseover, 
    active:0 
}); 

Utilisez le contrôle "Actif". Je ne sais pas si cela fonctionne sans themeroller. Le widget a un compte courant de tous les "en-têtes" utilisés pour créer votre menu. L'index 0 est le premier xxx1, l'index 1 est le deuxième xxx2, etc ...

Answer 2

J'ai lutté avec celui-ci aussi. J'ai enlevé les balises h3 qui entouraient mes liens a.nav et l'en-tête spécifié: '.nav'. Dans mon css, j'ai inclus "a.ui-state-active" pour changer l'en-tête de la div ouverte d'accordéon. Pour moi, l'ajout du "a" a fait la différence.

Answer 3

Pour ceux qui sont encore en utilisant jQuery-ui il suffit d'ajouter ceci à votre CSS:

.ui-accordion-header-active { 
    background: red !important; 
} 

il suffit de changer la couleur ou arrière-plan que vous voulez!