0

让我解释一下这个“新手”代码/脚本。我有 14 个 TABS 和 14 个容器。前三个选项卡（tab1、tab2 和 tab3）是主选项卡。Tab3 包含另外 11 个选项卡。正如您在我的 HTML 代码（如下）中看到的那样，我有 TABs div（标签页眉）和 TABs 容器。当我单击特定选项卡时，它会显示触发到该选项卡的特定内容。我在这里展示的代码运行良好，但我觉得有更舒适的方法可以做到这一点。问题是：我如何优化这段代码？或者我正在做的事情有更舒适的解决方案吗？div class="contentcontainer"这个想法是通过单击不是内部元素的 TAB来更改内容div class="contentcontainer 

<script>
 jQuery(document).ready(function ($) {
 $('#d_tab1').css('border-bottom', '0');
 $('#descriptionpagetabs div').click(function () {
 $(this).removeClass('notactivetab').siblings().addClass('notactivetab');
 });
 $('#d_tab1').click(function () {
 $(this).css('border-bottom', '0').siblings().removeAttr('style');
      $('#cont1').removeClass('deactivated').addClass('activated').siblings().removeClass('activated').addClass('deactivated');
 });
 $('#d_tab2').click(function () {
    $(this).css('border-bottom', '0').siblings().removeAttr('style');
    $('#cont2').removeClass('deactivated').addClass('activated').siblings().removeClass('activated').addClass('deactivated');
});
$('#d_tab3').click(function () {
    $(this).css('border-bottom', '0').siblings().removeAttr('style');
    $('#cont3').removeClass('deactivated').addClass('activated').siblings().removeClass('activated').addClass('deactivated');
});
$('div.arrowc').click(function () {
    $(this).toggleClass('arrowo').toggleClass('arrowc');
    $('#subtabs').slideToggle('normal');
});
$('#d_tab4').click(function () {
    $('#cont4').removeClass('deactivated').addClass('activated').siblings().removeClass('activated').addClass('deactivated');
});
$('#d_tab5').click(function () {
    $('#cont5').removeClass('deactivated').addClass('activated').siblings().removeClass('activated').addClass('deactivated');
});
$('#d_tab6').click(function () {
    $('#cont6').removeClass('deactivated').addClass('activated').siblings().removeClass('activated').addClass('deactivated');
});
$('#d_tab7').click(function () {
    $('#cont7').removeClass('deactivated').addClass('activated').siblings().removeClass('activated').addClass('deactivated');
});
$('#d_tab8').click(function () {
    $('#cont8').removeClass('deactivated').addClass('activated').siblings().removeClass('activated').addClass('deactivated');
});
$('#d_tab9').click(function () {
    $('#cont9').removeClass('deactivated').addClass('activated').siblings().removeClass('activated').addClass('deactivated');
});
$('#d_tab0').click(function () {
    $('#cont10').removeClass('deactivated').addClass('activated').siblings().removeClass('activated').addClass('deactivated');
});
$('#d_tab11').click(function () {
    $('#cont11').removeClass('deactivated').addClass('activated').siblings().removeClass('activated').addClass('deactivated');
});
$('#d_tab12').click(function () {
    $('#cont12').removeClass('deactivated').addClass('activated').siblings().removeClass('activated').addClass('deactivated');
});
$('#d_tab13').click(function () {
    $('#cont13').removeClass('deactivated').addClass('activated').siblings().removeClass('activated').addClass('deactivated');
});
$('a#imged').click(function () {
$('#cont11').removeClass('deactivated').addClass('activated').siblings().removeClass('activated').addClass('deactivated');
});
$('a#pixel').click(function () {
$('#cont12').removeClass('deactivated').addClass('activated').siblings().removeClass('activated').addClass('deactivated');
});
$('a#scrn').click(function () {
$('#cont13').removeClass('deactivated').addClass('activated').siblings().removeClass('activated').addClass('deactivated');
});
$('a#num4').click(function () {
$('#cont4').removeClass('deactivated').addClass('activated').siblings().removeClass('activated').addClass('deactivated');
});
$('a#num5').click(function () {
$('#cont5').removeClass('deactivated').addClass('activated').siblings().removeClass('activated').addClass('deactivated');
});
$('a#num6').click(function () {
$('#cont6').removeClass('deactivated').addClass('activated').siblings().removeClass('activated').addClass('deactivated');
});
$('a#num7').click(function () {
$('#cont7').removeClass('deactivated').addClass('activated').siblings().removeClass('activated').addClass('deactivated');
});
$('a#num8').click(function () {
$('#cont8').removeClass('deactivated').addClass('activated').siblings().removeClass('activated').addClass('deactivated');
});
$('a#num9').click(function () {
$('#cont9').removeClass('deactivated').addClass('activated').siblings().removeClass('activated').addClass('deactivated');
});
$('a#num10').click(function () {
$('#cont10').removeClass('deactivated').addClass('activated').siblings().removeClass('activated').addClass('deactivated');
}); 

});

HTML

<div id="descriptionpagetabs">
<div class="d_tabs" id="d_tab1">tab1</div>
<div class="d_tabs notactivetab" id="d_tab2">tab2</div>
<div class="d_tabs notactivetab" id="d_tab3">tab3:<div class="arrowc" id="arrow"></div>
</div>
</div>

<div id="subtabs">
<div class="d_stabs" id="d_tab4">tab4</div>
...
<div class="d_stabs" id="d_tab13">tab13(lasttab)</div>
</div>

<div id="descriptionpagecontainer">
<div id="cont1">Content 1</div>
...
<div class="deactivated" id="cont13">Content 13</div>
</div>
4

2 回答 2

1

您可以使用选择器开始 

$('div[id^="d_tab"]').click(function () {
 //...
});

即使对于所有 id 统计信息为d_tab.

也不是每次都重复这个

$('#d_tab0').click(function () {
    $('#cont10').removeClass('deactivated').addClass('activated').siblings().removeClass('activated').addClass('deactivated');
});

所有类似的方法都可以更改为一种方法

$('div[id^="d_tab"]').click(function () {
    var number = this.id.replace(/[^0-9]/g, '');
    var divId = "cont" + number;  
    $("#" + divId).removeClass('deactivated').addClass('activated').siblings().removeClass('activated').addClass('deactivated');
});

同样的事情可以用其他方法来完成。

PS：方法/功能可以减少冗余代码。您一次又一次地重复相同的方法/功能。

于 2013-10-07T12:19:56.730 回答
0 
$(".d_tabs").on("click", function (d) {
    $('.d_tabs').addClass("notactivetab")
    $($(d.currentTarget)[0]).removeClass("notactivetab");
    $('#descriptionpagecontainer div').addClass("deactivated");
    $("#descriptionpagecontainer #cont" + parseInt($($(d.currentTarget)[0]).attr("id")).toString()).removeClass("deactivated");
});

这应该可以解决问题。但是，我会认真建议将“停用”作为每个选项卡和容器 div 的默认状态。并且，仅将类 'active' 和 'activeTab' 分别应用于当前选定的选项卡及其对应的 div。

于 2013-10-07T13:07:35.747 回答