如何在 Jquery 中以智能方式改进此代码以更改 DIV 的背景代码

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

$(function () {
        $("span[id$='_tab']", "#<%= TabContainer1.ClientID %>").click(
        function () {
            $(".ajax__tab_outer", "#<%= TabContainer1.ClientID %>").css("background-color", "#edf2fb");
            $(".ajax__tab_outer", this).css("background-color", "#80FE80");
        });
    });

(fixed)

Answer 2

I'd move away from AjaxToolkit and replace everything with jQuery. Add custom class to generated controls and bind events to that class. You can then use "this" keyword to work with an element which has been clicked.

EDIT:

Assign a class to all your tab containers.

class="my_class"

Then in event binding add $('.my_class').live('click', myFunctionToChangeColours); It's up to you whether you need to do a.live or.bind. After this in myFunctionToChangeColours you'd use "this" which I have mentioned before to change a colour of the tab that you have clicked on.

Answer 3

place all your selectors(on which your are firing clcik event) in side an array, then iterate that array,and bind a click event to all your selectors..that will make your code shorter. you can make your resetColor() bit shorter in this way..

function resetColor(handler){
 $("#dnn_ctr8192_ViewWebShop_TabContainer1_"+handler+".ajax__tab_outer").css("background-color", "#edf2fb");
}

and then pass that middle words to that function like this(just an example).

resetColor(TabPanelVeiligheid_tab); 

hope it helps you a bit!!

Answer 4

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>