如何在Jquery中对此代码进行智能化改进，以改变DIV的后台代码

Question

我有6个DIV，当用户点击DIV时，它会显示DIV的内容。(我正在使用ASPX - Ajaxtabpanel)。

下面我算出了DIV的名称，我在下面做的是，当点击一个div时，改变背景颜色。因此Active div会得到另一种颜色。下面我有JQuery代码，它可以工作，但我相信它可以用更好的方式来完成。我能做些什么来改进代码以使用Jquery更好的功能？

正如您可能看到的，所有的DIV名称都以相同的约定开头...这些中间的词是不同的Algemeen，Juridisch，Fiscaal，Economisch，Veiligheid…

请建议我如何改进代码...

<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

如果这些是唯一使用类ajax__tab_outer的div，那么您可以这样做：

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

Answer 2

$(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");
        });
    });

(已修复)

Answer 3

我会离开AjaxToolkit，用jQuery取代所有的东西。向生成的控件添加自定义类，并将事件绑定到该类。然后，您可以使用"this“关键字来处理已单击的元素。

编辑：

为所有选项卡容器分配一个类。

class="my_class“

然后，在event binding add $('.my_class').live('click', myFunctionToChangeColours);中，您需要执行.live还是.bind，这取决于您。在此之后，在myFunctionToChangeColours中，您可以使用我之前提到的" this“来更改您所单击的选项卡的颜色。