Question

I’ve 6 div’s when the user clicks on the DIV it displays the contect of the divs. (I’m using ASPX – Ajaxtabpanel).

Below I figured out the div names and what I do below is, when the click on a DIV, change the Background color. So Active div get another color. Below I’ve JQuery code it works but I’m sure it can be done in better way.. what can I do to improve the code to use better functions of Jquery?

As you probably can see, all the DIV names start with same convention … Just these middle words are different Algemeen, Juridisch, Fiscaal, Economisch, Veiligheid…

Please advice how can I improve the code….

<script language="javascript" type="text/javascript">

function resetColor() {
//set all background colors of Div to blue
    $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelAlgemeen_tab .ajax__tab_outer").css("background-color", "#edf2fb");
    $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelJuridisch_tab .ajax__tab_outer").css("background-color", "#edf2fb");
    $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelSociaal_tab .ajax__tab_outer").css("background-color", "#edf2fb");
    $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelFiscaal_tab .ajax__tab_outer").css("background-color", "#edf2fb");
    $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelEconomisch_tab .ajax__tab_outer").css("background-color", "#edf2fb");
    $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelVeiligheid_tab .ajax__tab_outer").css("background-color", "#edf2fb");
}

$(document).ready(function() {

  //Change the ACTIVE div background color

    $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelAlgemeen_tab").click(function() {
        resetColor();
        $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelAlgemeen_tab .ajax__tab_outer").css("background-color", "#80FE80");
    });
    $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelJuridisch_tab").click(function() {
    resetColor();
        $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelJuridisch_tab .ajax__tab_outer").css("background-color", "#80FE80");
    });
    $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelSociaal_tab").click(function() {
    resetColor();
        $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelSociaal_tab .ajax__tab_outer").css("background-color", "#80FE80");
    });
    $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelFiscaal_tab").click(function() {
    resetColor();
        $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelFiscaal_tab .ajax__tab_outer").css("background-color", "#80FE80");
    });
    $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelEconomisch_tab").click(function() {
    resetColor();
        $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelEconomisch_tab .ajax__tab_outer").css("background-color", "#80FE80");
    });
    $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelVeiligheid_tab").click(function() {
    resetColor();
        $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelVeiligheid_tab .ajax__tab_outer").css("background-color", "#80FE80");
    });
});

Answer 1

If those are the only divs that use class ajax__tab_outer, you could do something like this:

<script language="javascript" type="text/javascript">
function resetColor() {
   $(".ajax__tab_outer").css("background-color", "#edf2fb");
}

function changeColor() {
   resetColor();
   $(this).find(".ajax__tab_outer").css("background-color", "#80FE80");
}

$(document).ready(function() {
   // Bind all the divs to the changeColor function
   $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelVeiligheid_tab").click(changeColor);
   ...
}
</script>