Visualforce - Dynamically Change tab color

Question

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; }

Answer 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>