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

Question

我正在使用 jQuerySteps 插件创建标签。我有四个部分，因此有 4 个选项卡，它们工作得很好。但我希望每个选项卡都有 different percent of width。截至目前，他们每人获得 25%。但我想手动为它们分配宽度。我可以通过添加 CSS class 来完成。但由于它是一个插件，我无法找到 <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%;
}

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

How to change width of tabs in jQuery Steps Plugin

javascript

css

jquery

tabs

jquery-steps