2017-05-08 43 views
2

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

下面是插件如何设置25%的宽度。 enter image description here

我的前端代码:

<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或类,这样我可以设置宽度first tab : 20 % second tab:40 % and so on

+0

你也可以使用像.wizard> .steps> ul>李:第n个孩子(1),.向导> .steps> ul>李:第n个孩子(2) –

+0

有效。你可以添加它作为答案。我会接受它。它也会帮助其他人。 – Unbreakable

+0

Plz发小提琴,所以我可以在这里设置 –

回答

1

CSS

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