Comment modifier la largeur des onglets dans jQuery Steps Plugin

Question

J'utilise jQuerySteps Plugin pour créer des onglets. J'ai quatre section et donc 4 onglets et ils fonctionnent très bien. Mais je veux que chaque onglet ait different percent of width. À partir de maintenant, chacun d'eux obtient 25%. Mais je veux leur assigner manuellement la largeur. Je peux le faire en ajoutant la classe CSS. Mais puisque c'est un plugin, je ne suis pas capable de trouver comment les <ul> and <li> sont créés et rendus.

Voici comment le plugin définit une largeur de 25%.

Mon code frontal:

<div id="example-basic"> 
    <h3>Keyboard</h3> 
    <section> 
     <p>Try the keyboard navigation by clicking arrow left or right!</p> 
    </section> 
    <h3>Effects</h3> 
    <section> 
     <p>Wonderful transition effects.</p> 
    </section> 
    <h3>Pager</h3> 
    <section> 
     <p>The next and previous buttons help you to navigate through your content.</p> 
    </section> 
</div> 

JS code

$("#example-basic").steps({ 
    headerTag: "h3", 
    bodyTag: "section", 
    transitionEffect: "slideLeft", 
    autoFocus: true 
}); 

Question:

Comment ajouter id ou classe afin que je puisse définir la largeur de first tab : 20 % second tab:40 % and so on

Answer 1

CSS

.wizard>.steps>ul>li:nth-child(1){ 
    width: 20%; 
} 
.wizard>.steps>ul>li:nth-child(2){ 
    width: 40%; 
}