javascript - 如何在 jQuery Steps 插件中更改选项卡的宽度

Question

我正在使用 jQuerySteps用于创建选项卡的插件。我有四个部分，因此有 4 个选项卡，它们工作得很好。但我希望每个选项卡都有 different percent of width .截至目前，他们每人获得 25%。但我想手动为它们分配宽度。我可以通过添加 CSS 类来实现。但由于它是一个插件，我无法找到 <ul> and <li>正在创建和渲染。

这是插件设置 25% 宽度的方式。

我的前端代码:

<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代码

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

问题:

如何添加 id 或 class 以便我可以设置 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%;
}