Using CSR to change each tab color body

Question

I am displaying Sharepoint Tabs using CSR display templates.I want to color each tab which i was able to get it. Now I want to change the background color of the tab contents with the same color. For example if i click first tab where the color is Blue the fields in that tab also should display blue,Similarly for other tabs like orange, red . here is the code which i have tried.

  var currentFormUniqueId;
    var currentFormWebPartId;

    // Use "Multi String" javascript to embed the required css
    var MultiString = function (f) {
        return f.toString().split('\n').slice(1, -1).join('\n');
    }
    var tabsStyle = MultiString(function () {/**
    .tabs {
    border-bottom: 1px solid #ddd;
    content: " ";
    display: table;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
    width: 100%;
    }

    .tabs > li {
        float: left;
        margin-bottom: -1px;
        position: relative;
        display: block;

    }

    .tabs > li > a {
        margin-right: 2px;
        line-height: 1.42857143;
        border: 1px solid transparent;
        position: relative;
        display: block;
        padding: 10px 15px;
    }

    .tabs a {
        color: #fff;
        text-decoration: none;
        background-color:RGB(0,109,182);
    }


    .tabs > li.active > a, .tabs > li.active > a:hover, .tabs > li.active > a:focus {
        color: #fff;
        font-style:oblique;
        background-color:RGB(0,109,182);
        border: 1px solid #ddd;
        border-bottom-color: transparent;
        cursor: default;
    }


    .tabs .Discovery a {
    background-color:RGB(38,165,112);
    font-color:#fff;
    }

    ul.tabs > li.Discovery > a, ul.tabs > li.Discovery > a:focus, ul.tabs > li.Discovery > a:hover{
        color: #fff;
        background-color:RGB(38,165,112);
        border: 1px solid #ddd;
        border-bottom-color: transparent;
        cursor: default;
    }

    .tabs .BusinessPlan a {
    background-color:RGB(236,176,34);
    font-color:#fff;
    }

    ul.tabs > li.BusinessPlan > a, ul.tabs > li.BusinessPlan > a:focus, ul.tabs > li.BusinessPlan > a:hover{
        color: #fff;
        background-color:RGB(236,176,34);
        border: 1px solid #ddd;
        border-bottom-color: transparent;
        cursor: default;
    }

    .tabs .Development a {
    background-color:RGB(165,79,139);
    font-color:#fff;
    }

    ul.tabs > li.Development > a, ul.tabs > li.Development > a:focus, ul.tabs > li.Development> a:hover{
        color: #fff;
        background-color:RGB(165,79,139);
        border: 1px solid #ddd;
        border-bottom-color: transparent;
        cursor: default;
    }

    .tabs .Implemetation a {
    background-color:RGB(192,0,0);
    font-color:#fff !important;
    }

    ul.tabs > li.Implemetation > a, ul.tabs > li.Implemetation > a:focus, ul.tabs > li.Implemetation> a:hover{
        color: #fff;
        background-color:RGB(192,0,0);
        border: 1px solid #ddd;
        border-bottom-color: transparent;
        cursor: default;
    }
    **/
    });
var tabsObj = [
    ["ProjectDetails", ["Title", "Age", "Married", "Mobile", "SSN"]],
    ["Discovery", ["Manager", "Salary", "Phone", "Email"]],
    ["BusinessPlan", ["Title", "Age", "Married", "Mobile", "SSN"]],
    ["Development", ["Manager", "Salary", "Phone", "Email"]],
    ["Implemetation", ["Comments"]]
];


(function () {

    // jQuery library is required in this sample
    // Fallback to loading jQuery from a CDN path if the local is unavailable
    (window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"><\/script>'));

    var tabsContext = {};
    tabsContext.OnPreRender = TabsOnPreRender;
    tabsContext.OnPostRender = TabsOnPostRender;


    // accordionContext.OnPostRender = accordionOnPostRender;
    tabsContext.Templates = {};

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(tabsContext);

})();

function TabsOnPreRender(ctx) {
    if (!currentFormUniqueId) {

        currentFormUniqueId = ctx.FormUniqueId;
        currentFormWebPartId = "WebPart" + ctx.FormUniqueId;

        jQuery(document).ready(function () {

            var tabHTMLTemplate = "<li class='{class}'><a href='#{Index}'>{Title}</a></li>";
            var tabClass;
            var tabsHTML = "";

            for (var i = 0; i < tabsObj.length; i++) {
               tabClass = tabsObj[i][0];
                if (i == 0){ tabClass = "active";}
                tabsHTML += tabHTMLTemplate.replace(/{Index}/g, i).replace(/{Title}/g, tabsObj[i][0]).replace(/{class}/g, tabClass)
            }

            jQuery("#" + currentFormWebPartId).prepend("<ul class='tabs'>" + tabsHTML + "</ul>");


            jQuery('.tabs li a').on('click', function (e) {
                var currentIndex = jQuery(this).attr('href').replace("#","");
                showTabControls(currentIndex);
                jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
                e.preventDefault();
            });

            showTabControls(0);

            jQuery("#" + currentFormWebPartId).prepend("<style>" + tabsStyle + "</style>");
        });

    }
}

function TabsOnPostRender(ctx) {
    var controlId = ctx.ListSchema.Field[0].Name + "_" + ctx.ListSchema.Field[0].Id;
    jQuery("[id^='" + controlId + "']").closest("tr").attr('id', 'tr_' + ctx.ListSchema.Field[0].Name).hide();
}

function showTabControls(index)
{
    jQuery("#" + currentFormWebPartId + " [id^='tr_']").hide();

    for (var i = 0; i < tabsObj[index][1].length; i++) {
        jQuery("[id^='tr_" + tabsObj[index][1][i] + "']").show();
    }
}

Answer 1

Add the below code in CSS

.ms-formtable{
width:750px;
}
.ms-formtable.projectdetails{
    background:rgb(185,227,255);
}
.ms-formtable.discovery{
    background:rgb(190,240,219);
}
.ms-formtable.businessplan{
    background:rgb(248,230,186);
}
.ms-formtable.development{
    background:rgb(228,198,219);
}
.ms-formtable.implemetation{
    background:rgb(255,163,163);
}

and in th tab click event above change the below code

currentTabConent.addClass("projectdetails");

            jQuery('.tabs li a').on('click', function (e) {
                var currentIndex = jQuery(this).attr('href').replace("#","");

                showTabControls(currentIndex);
                jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
                var newClass = this.text.toLowerCase();
                var oldClass = currentTabConent.attr("class");
                currentTabConent.removeClass(oldClass).addClass("ms-formtable "+newClass);
                e.preventDefault();
            });