다른 색상의 탭으로 하나의 프라임 아코디언 만들기

Question

아코디언의 탭을 다양한 색상으로 설정하려면 어떻게해야합니까? 는 지금 내 CSS 파일에 있습니다

.ui-accordion .ui-accordion-header a { 
    color: rgb(250,250,250); 
    background: blue; 
} 

편집 :이시

<p:accordionPanel multiple="true" > 
    <p:tab title="Blue Tab"> 
    <h:panelGrid columns="1" cellpadding="10"> 
     <h:outputText 
     value="This tab must be blue" /> 
    </h:panelGrid> 
    </p:tab> 
    <p:tab title="Red Tab"> 
    <h:panelGrid columns="1" cellpadding="10"> 
     <h:outputText 
     value="This tab must be red" /> 
    </h:panelGrid> 
    </p:tab> 
</p:accordionPanel> 

: 나는 내 XHTML 파일에는 다음이 Primefaces 를 사용하는 것이 말을 잊었 때문에 나는 내 게시물을 수정 내 탭이 모두 청색 인 경우. 어떻게 두 번째 빨간색을 만들 수 있습니까?

Answer 1

해결책을 찾았습니다. 나는 각각 다른 색깔 탭에 대한 titleStyleClass 추가 :

.blueTab { 
    background: blue; 
} 

.redTab { 
    background: red; 
} 

그것은 잘 작동 :

<p:accordionPanel multiple="true"> 
    <p:tab title="Blue Tab" titleStyleClass="blueTab"> 
    <h:panelGrid columns="1" cellpadding="10"> 
     <h:outputText 
     value="This tab must be blue" /> 
    </h:panelGrid> 
    </p:tab> 
    <p:tab title="Red Tab" titleStyleClass="redTab"> 
    <h:panelGrid columns="1" cellpadding="10"> 
     <h:outputText 
     value="This tab must be red" /> 
    </h:panelGrid> 
    </p:tab> 
</p:accordionPanel> 

내 CSS 파일에

나는 각 titleStyleClass의 배경색을 설정합니다. 이 사람이 도움이되기를 바랍니다 !!