2017-05-08 11 views
2

jQuerySteps 플러그인을 사용하여 탭을 만듭니다. 나는 4 개의 섹션과 4 개의 탭을 가지고 있으며 완벽하게 작동합니다. 각 탭마다 different percent of width이 있어야합니다. 지금은 각자 25 %를 얻습니다. 하지만 수동으로 너비를 지정하고 싶습니다. CSS 클래스를 추가하면됩니다. 그러나 플러그인이기 때문에 <ul> and <li>이 어떻게 생성되고 렌더링되는지를 알 수 없습니다.jQuery Steps Plugin에서 탭 너비를 변경하는 방법

다음은 플러그인의 너비를 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

: 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%; 
} 
또한 .wizard> .steps> UL> 리처럼 사용할 수