Question

当用户点击DIV时，我有6个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

$(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 2

我将离开AjaxToolkit并用jQuery替换所有内容。将自定义类添加到生成的控件并将事件绑定到该类。然后，您可以使用“this”关键字来处理已单击的元素。

修改

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

class =“my_class”

然后在事件绑定中添加$('.my_class').live('click', myFunctionToChangeColours);由您决定是否需要执行.live或.bind。在myFunctionToChangeColours之后，您将使用我之前提到的“this”来更改您单击的选项卡的颜色。

Answer 3

将所有选择器（你正在发射clcik事件）放在一个数组中，然后迭代该数组，并将click事件绑定到所有选择器..这将使您的代码更短。你可以用这种方式缩短你的resetColor（）位。

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

然后将这些中间词传递给那个函数（只是一个例子）。

resetColor(TabPanelVeiligheid_tab);

希望它对你有所帮助!!

Answer 4

如果那些是使用类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>

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

4 个答案: