0

I have a VF page with 2 tabs (apex:tabpanel). Each tab has status field with picklist value "In progress" or "Completed". When the status is "In progress," I would like the tab color to be red and green when the status is "Completed." How can I achieve this? Below is an example I found online but it's not exactly what I'm looking for. Thanks

.activeTab { color:red; }

.inactiveTab { color:green; }

  • Explain a little bit more like, how the "In Progress" event will fire and what will happen if the user switches tab? – Saroj Bera Jul 29 '15 at 7:27
  • So, each tab is independence of each other and each has it own status field. The user will change the status from "In Progress" to "Completed" when they're done with their tasks. Thanks – user7123 Jul 29 '15 at 7:57
1

Here is a working example. I have tried to generate your scenario. Hope this will help.

<apex:page standardController="Account">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" language="javascript">
        if(jQuery) {
            jQuery.noConflict();
        }
        function changeColor(obj,tabname){
            var selectedValue = obj.options[obj.selectedIndex].value;
            var tabname = '[id$='+tabname+'_lbl]';
            if(selectedValue == "inprogress"){
                jQuery(tabname).css({"background-color":"red","color":"white","background-image":"none"});
            }
            if(selectedValue == "completed"){
                jQuery(tabname).css({"background-color":"green","color":"white","background-image":"none"});
            }            
        }        
    </script>
    <apex:tabPanel switchType="client" selectedTab="name2" id="theTabPanel" activeTabClass="activeTab">
        <apex:tab label="One" name="name1" id="tabOne">  
            <apex:form id="form1">
                <apex:selectList id="selected_list" required="false" size="1" onchange="changeColor(this,'tabOne');">
                    <apex:selectOption itemvalue="None" itemLabel="--None--"/>
                    <apex:selectOption itemvalue="inprogress" itemLabel="In Progress"/>
                    <apex:selectOption itemvalue="completed" itemLabel="Completed"/>
                </apex:selectList>       
            </apex:form>        
        </apex:tab>
        <apex:tab label="Two" name="name2" id="tabTwo">
            <apex:form id="form2">
                <apex:selectList id="selected_list" required="false" size="1" onchange="changeColor(this,'tabTwo');">
                    <apex:selectOption itemvalue="None" itemLabel="--None--"/>
                    <apex:selectOption itemvalue="inprogress" itemLabel="In Progress"/>
                    <apex:selectOption itemvalue="completed" itemLabel="Completed"/>
                </apex:selectList>       
            </apex:form>        
        </apex:tab>
    </apex:tabPanel>        
</apex:page>
  • @user7123 if it was the answer can you please mark it as answer. Thanks. – Saroj Bera Aug 2 '15 at 19:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.