İçindekiler sekmesinin rengi nasıl sekmeyle değiştirilir?

Question

Primefaces kullanıyorum 5.2. Oryantasyon olarak soldaki sekme var. Seçilen sekmenin rengini değiştirmem gerekiyor. İşte

<p:tabView orientation="left" id="tabViewID" dynamic="true" 
         cache="false" 
         activeIndex="#{manageBean.activeIndex}" 
         style="margin-left: 1%;width: 98%;background-color: #F5F5F5;"> 
         <p:ajax event="tabChange" 
          listener="#{manageBean.fetchReports}" /> 
         <p:tab title="Tab1" id="tabID1" > 

         </p:tab> 

         <p:tab title="Tab2"> 

         </p:tab> 

         <p:tab title="Tab3"> 

         </p:tab> 
</p:tabView> 

ekran görüntüsü:: İşte

benim kodudur

Herhangi Fikir ??

böyle deneyin Sadece Tab'de incelemek ve varsayılan CSS Sınıf içinde rengini değiştirmek için

Answer 1

.. ... Primefaces yılında

<style type="text/css"> 
     body .ui-tabs.ui-tabs-top .ui-tabs-nav li.ui-state-active, 
     body .ui-tabs.ui-tabs-bottom .ui-tabs-nav li.ui-state-active, 
     body .ui-tabs.ui-tabs-left .ui-tabs-nav li.ui-state-active, 
     body .ui-tabs.ui-tabs-right .ui-tabs-nav li.ui-state-active{ 
      background: #e4a1c2; 
     } 
</style> 

Answer 2

, sekmeler bir liste içindeki bir bağlantı (<a>) olarak oluşturulur madde (<li>).

Yalnızca belirli bir sekmenin rengini değiştirmek istediğim bir durum vardı. Bu nasıl yaptığımı: Ben)

<p:tab id="tab_id" title="#{campeur.prenomNom}" 
    titleStyleClass="#{campeur.nouveauCampeur ? 'tabNouveau' : 'tabExistant'}"> 

2: <p:tab> tanımda

1), benim koşulu temel liste öğesi (sekme öğesi) bir sınıf tanımını eklemek için titleStyleClass eklendi Sekmenin arka plan rengini değiştirmek için stil tanımımı css’mde ekledi. Sekme seçilmediğinde ve sekme seçildiğinde veya üzerine geldiğinde daha koyu olduğunda renk yanar. Bu renk değişikliğini yalnızca tabNouveau sınıfı bulunduğunda, yani durumumun karşılandığı zaman uyguladım. Aksi takdirde, tabExistant sınıf için özel bir stil:

li.tabNouveau a { 
    background-color: #FFE289; 
} 

li.tabNouveau.ui-state-active a, li.tabNouveau.ui-state-hover a { 
    background-color: #FFD44F; 
} 

sonucunu verdi: Bu diğerlerine yardımcı olabilir

Umut!