JQuery 使用变量选择器

Question

我正在尝试使用 JQuery 为网站创建选项卡。我让这个工作:

$("#tabs_1").click(function(){
    $("[id*=tabc]").css({"z-index":0,"opacity":0})
    $("#tabc_1").css({"z-index":1,"opacity":100});
});
$("#tabs_2").click(function(){
    $("[id*=tabc]").css({"z-index":0,"opacity":0})
    $("#tabc_2").css({"z-index":1,"opacity":100});
});
$("#tabs_3").click(function(){
    $("[id*=tabc]").css({"z-index":0,"opacity":0})
    $("#tabc_3").css({"z-index":1,"opacity":100});

但是我想知道是否有一种方法可以整理代码......也许是这样的:

$("#tabs_[x]").click(function(){
    var tab_num = x
    $("[id*=tabc]").css({"z-index":0,"opacity":0})
    $("#tabc_(tab_num)").css({"z-index":1,"opacity":100});
});

Answer 1

你应该使用 jquery attribute starts with selector .试试这个:

$("[id^=tabs]").click(function(){
    var tab_num = this.id.split("tabs_")[1];
    $("[id*=tabc]").css({"z-index":0,"opacity":0})
    $("#tabc_"+tab_num).css({"z-index":1,"opacity":100});
});